自動カーニング

スタイルシート

font-feature-settings : "halt";

iOSで滑らかなスクロール

-webkit-overflow-scrolling

スタイルシート

.content {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

Safari（Webkit）向けに、フォントのレンダリングを調整

CSS

-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased; /* Safari での Default値 */

IE10ではテキストフォーム入力時に「クリアボタン」や「パスワード確認ボタン」非表示

概要

IE10ではテキストフォーム入力時に「クリアボタン」や「パスワード確認ボタン」が表示されます。
消す場合は下記スタイルシートを指定します。

:-ms-clear , :-ms-reveal

スタイルシート

input::-ms-clear { // クリアボタン非表示
    display:none;
}
input::-ms-reveal {// パスワード確認ボタン非表示
    display:none;
}

テキスト入力時のIMEの状態を指定する（IE独自仕様）

ime-mode

プロパティ値

プロパティ値	説明
auto	特に指定しません。
active	初期値が日本語入力モードになります。
inactive	初期値が英数字入力モードになります。
disabled	英数字入力モードになります。ユーザーの操作によるモードの変更はできません。

<input style="ime-mode: auto;" type="text" />
<input style="ime-mode: active;" type="text" />
<input style="ime-mode: inactive;" type="text" />
<input style="ime-mode: disabled;" type="text" />

モバイル端末、テキストの自動拡大制御

概要

モバイル端末で横向きにした時に、テキストが自動拡大するのを防ぐ

CSS

-webkit-text-size-adjust: 100%;

英語テキストの大文字、小文字指定

text-transform

英語テキストの大文字表示、小文字表示を指定する際に使用

プロパティ値

プロパティ値	説明
none	記述した通りに表示します。これが初期値です。
capitalize	単語の先頭文字を大文字で表示します。
lowercase	全てを小文字で表示します。
uppercase	全てを大文字で表示します。
initial	デフォルト値には、このプロパティを設定します。
inherit	親要素からこのプロパティを継承します。

iPhoneリンクを長押しした時のポップアップメニューを出さない

-webkit-touch-callout

プロパティ値

プロパティ	説明
default	記述した通りに表示します。これが初期値です。
none	呼出を無効にします。
inherit	親要素からこのプロパティを継承します。

スタイルシート

-webkit-touch-callout:default;
-webkit-touch-callout:none;
-webkit-touch-callout:inherit;

フォント指定

CSS

@font-face{
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic Light"),local("游ゴシック Light");
    font-weight: 300;
}
@font-face{
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic Medium"),local("游ゴシック Medium");
    font-weight: 500;
}
@font-face{
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic bold"),local("游ゴシック bold");
    font-weight: bold;
}
@font-face {
    font-family: "Helvetica Neue";
    src: local("Helvetica Neue Regular");
    font-weight: 100;
}
@font-face {
    font-family: "Helvetica Neue";
    src: local("Helvetica Neue Regular");
    font-weight: 200;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, "Hiragino Kaku Gothic ProN","メイリオ", "M+ 1p",Osaka, sans-serif;
}