[CSS font 設定]
fontプロパティは,CSSでフォントに関する指定をまとめて行う際に使用する.
CSSでfontを使用する場合は環境依存を考慮して,OS標準搭載のフォントを複数しておくのがよい.font-familyでは表示したい優先度の高い順から記述していき閲覧するユーザーのデバイスでfontがない場合は,次へ次へというかたちで選択されていく.
体の記述の仕方は自由だが,明朝体・ゴシックは以下からコピーし使用することを進める.
[明朝体の指定]
p { /*font:明朝*/ font-family: "Palatino Linotype", "Book Antiqua", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "MS 明朝", Palatino, serif; }
[ゴシックの指定]
h1{ /*ゴシック*/ font-family: Univers, Arial, Helvetica, Geneva, "游ゴシック", YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; }
[文字のプロパティ]
プロパティは下記のような指定が可能.
p { /*カラー*/ color: #444; /*サイズ*/ font-size: 12px; /*行間*/ line-height: 2em; /*ウエイト*/ font-weight:normal; /*字間*/ letter-spacing: 0.05em; }
[Web Font]
基本的にWebブラウザは端末にインストールされているフォントを呼び出し文字を表示する.端末のフォント如何では,Webデザイナーが意図しない表示がなされフォントに関するWebデザインに制約が生じてしまう.フォントを画像にして表示するという手段はあるが,文章修正のメンテナンス,文章の検索といった点で問題がある.そこでWebサーバー上にフォントファイルを置き,Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントであり,これを使用すると環境依存にならない.ただし,現状和文フォントに関しては,まだコスト面など影響し使用が困難である.
[Web Font(Google font)の使い方]
→Google Font
上記URLからGoogle Font Webサイトに行き,使用したいフォントをセレクト.
その後,右下中間のアイコンを選択.
フォントのウエイト・スタイルを選択
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'> <link href="styles.css" rel="stylesheet" type="text/css"> </head>
</head>のうえで,CSSを読み込む1行前に
<link href=’http://fonts.googleapis.com/css?family=Lato:100′ rel=’stylesheet’ type=’text/css’>
↑を記述.
h1{ font-family: 'Lato', sans-serif; }
CSSで上記のように指定する.
[参考]
【フォント】
http://www.dtp-transit.jp/misc/web/post_1881.html
http://g-azami.tumblr.com/post/76447906591/a-2014-edition-japanese-css-font-family-set-up
【プロパティ(字間・行間など)】
http://www.tagindex.com/stylesheet/text_font/
http://www.htmq.com/style/font.shtml