デザイナーのフォント見本帳「F」

当サイトのフォントのCSS設定について

いつも、デザイナーのフォント見本帳「F」をご利用頂きましてありがとうございます。複雑な機能と情報をまとめているので、至らない点あるかとおもいますが、改善点の要望等ございましたらお気軽にこちらからご意見よろしくお願いいたします。

さて、こちらのページは「Webデザイナー」「HTMLコーダー」さんむけに、当サイトのCSSのフォントの設定をご案内させていただきます。是非、Webデザイン、コーディングの参考にしてください。

bodyタグ

フォントの解説文や特集記事、Q&A、その他、ナビゲーション等は基本的には下記で指定しています。また各それぞれ紹介しているフォントに関しては、Webフォントの「font-family」で別途指定を行なっています。また、禁則処理、英文の改行についてもbodyにて設定しております。

body{
font-family:’游ゴシック Medium’,”Yu Gothic Medium”,”Yu Gothic”,”游ゴシック”,”游ゴシック体”,”游ゴシック Medium”,YuGothic,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic ProN”,”Hiragino Kaku Gothic Pro”,verdana,”メイリオ”,Meiryo,Osaka,sans-serif;

-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;

font-size:14px;
font-weight:400;
font-style:normal;

overflow-wrap: break-word;
line-break: strict;
word-wrap: break-word;
word-break: normal;
}

リアルタイムプレビューエリアの文字詰め設定

文字を組んだ時の簡単なイメージを確認できる「リアルタイムプレビューエリア」に関しましては、句読点、約物は詰めずに、「仮名」をプロポーショナルメトリクスで調整。全角(1em)の幅で設定ではなくフォントの字形(横幅)のサイズで詰める設定としております。

.sample{
-moz-font-feature-settings: “pkna” 1;
-webkit-font-feature-settings: “pkna” 1;
font-feature-settings: “pkna” 1;
}

※当サイトのカテゴリー「コーディング・合成フォント」においては、句読点、約物が詰まっているフォント・組見本がありますが、そちらは約物半角専用のWebフォント「Yaku Han JP」の使用により「句読点、括弧等の約物が」詰まっています。CSSの設定ではないのでご注意ください。

※ごく僅かですが一部のフリーフォントは句読点、約物も詰まっている場合があります。Adobe FontsやGoogle Fontsから提供されているフォントは「仮名」のみプロポーショナルメトリクスで詰める設定です。

※Webフォントの仕様の都合上、プロポーショナルメトリクスで詰めることのできないフォントも一部ございます。予めご了承願います。

  • トップ>
  • 当サイトのフォントのCSS設定について