font

[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サイトに行き,使用したいフォントをセレクト.
その後,右下中間のアイコンを選択.
01フォントのウエイト・スタイルを選択
スクリーンショット 2014-09-17 22.30.09

02

<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

カテゴリー: ALL, CSS, メモ パーマリンク