DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

Webフォント

先日、メイン講師が研修中のため、別の先生がやってきました。
GIMPを習いました。(プリントもらえなかったので詳細は不明。
メイン講師にはプリントいってると思います(^^;)
途中、1日中GIMPというのもナンなので、ということで
Webフォントについて習いました。

ちょうど先日、元上司と仕事の打合せの時に
Webフォントを使うか否かの話をしていたので
個人的には良いタイミングでした。

結論として、先生は
「見出しにはいいかもしれないけど、本文は
変わった文字は読みにくいので、やめたほうがいい」
とのことでした。
↓ためしにアップしてみました。(別画面で開きます)
http://kunren103.s601.xrea.com/20140810/
※IEはそもそも解釈しません(^^;)
※fc2は「.woff」形式のファイルがアップロードできなかったので、無料のXreaサーバーを使っています。

ざっくりとした使い方をめも。

1.フリーフォントを入手。
コリス 2014年用、日本語のフリーフォントの110種類のまとめ
-商用サイトだけでなく同人誌などでの利用も明記

など。検索。

2.たいていはOTFかTTF形式なのでそのままでは重たい。
.woff にした方がファイルが軽いので変換ソフトを使用して形式を変換。
↓武蔵システムのWOFFコンバータ をダウンロード
http://opentype.jp/woffconv.htm

(▼詳しくは下記 武蔵システムのWOFFコンバータ を参照)

3.フォントをHTMLと共にアップロードしてCSSから呼び出す。
↓コードはコチラからコピペ
http://css-tricks.com/snippets/css/using-font-face/
(フォントのリンク先はCSSから見た位置になるので注意。)

先生いわく、フォント名は日本語でない方が良いとのことで、変更してみました。


武蔵システムのWOFFコンバータ 手順めも
http://opentype.jp/woffconv.htm からダウンロード
関連記事

コメント

非公開コメント

※宣伝目的のようなコメントが時々あることから、コメントを承認方式に変更しました。
アダルトサイト・販売目的のサイトに誘導するもの、宣伝目的のもの、
わいせつもしくは公序良俗に反するもの、
また誤解を招くようなコメントは、削除させていただきます。

トラックバック

CSSの基本2

さて、此間(こないだ)の[CSSの基本1]では、まずは基本をおさらいと言いながら結構初歩的な内容はすっ飛ばした感が否めず、予定を変更してもうちょい根幹の部分を掘り下げてみようかな〜と。 と言ってもCSS(スタイルシート)が何故必要なの?とか、文書構造に関するHTMLとの関係性なんかはそれなりに詳しく解説してるページをご覧いただくとして・・ 参照:CSSとは?−CSSの基本 by HT...

2014年08月16日 12:32from [Bad Tongue Q]

http://memo352.blog119.fc2.com/tb.php/564-121565a5