27
August
日本語のWEBフォントの使い方
使いたいフォントファイルをアップロード
@font-face {
font-family: フォント名;
src: url('フォントファイル名') format("種類名");
}
@font-face {
font-family: MyWebFont;
src: url('./wf/freefont.otf') format("opentype");
}
h1 {
font-family: MyWebFont;
}
フォントの種類によってはシャギッて汚く見えた。
それをtext-shadowとか駆使してぼかしてアンチエイリアスかかってるように見せるらしい。
でもめんどくさいから汚く見えるフォントを使うのをやめた。
日本語のフォントファイルは文字数が多いので容量が多い。
だから必要な文字だけ云々サービスがあるけどRoundedM+以外は有料だからやってられない。
重いなんて知ったことがくそがとフォントファイルをアップロードして使うことにする。
しかしスマホで見たら重過ぎてやばかった。
うちのwifiはくそなのでそれが顕著に現れて見れたもんじゃなかったので、日本語webフォント使いを考え直す。
でも画像を作るのがめんどくて仕方ない。
mediaクエリでのスマホサイズは@font-faceの使用をやめることにした。
そうしたら、webフォント使ってた部分がMSゴシック？になった。
えー！font-family継承してくんないの？なんか線細すぎだしどうしよう。
スマホでのフォントの見え方は関係ないが、PCでブラウザサイズを縮めたときにMSゴシックみたいのがでてくる。
スマホサイズのmediaクエリにfont-familyをもう一度書き込む。
変化がなかったので!importantしとく。これでwebフォント使ってた部分にメイリオが復活した。
追記
色々とおかしいことに気づいてなかった。
問題1
@media only screen and (min-width: 959px){ ・・・ }
の中に@font-fase{ }をいれて、スマホが読み込んでくるサイズではwebフォントを使わない書き方にしてみていた。このままで出来ていたがIEで確認していなかった。（死んでいい）
確認してみたらIEでwebフォントが読み込まれていなかった。
他のブラウザでは正常にメディアクエリ通りに切り替わっている。
IEでも@font-faceの指定以外はメディアクエリを読み込んでいる。
なんなの。
少しづつHTMLとCSSを削っていって原因を調べたら、メディアクエリだった。
@font-faceをメディアクエリ内で指定するとIEでは認識しない！
色々うんうん考えて、
1、デフォルトのフォント指定
2、全体のCSSに@font-face
3、webフォントを使いたいセレクタにまとめてフォント指定(楽にするため)
4、メディアクエリで、まとめてフォント指定したCSSにデフォルトのフォント指定を上書き指定
CSSの順番
1
font-family:"ヒラギノ明朝 Pro W3","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
2
@font-face{
font-family: myfont;
src:url(フォントファイル名.eot?),
url(フォントファイル名.woff) format('woff'),
url(フォントファイル名.ttf) format('truetype');
}
3
h1, h2{
font-family: myfont;
}
4
@media only screen and (max-width: 959px){
h1, h2{
font-family:"ヒラギノ明朝 Pro W3","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
}
}
よく考えればこっちのやり方のほうが順々にきていてスムーズだよね
IEしね
.eot、.woff ファイルを作るのに武蔵システムとかいうとこのソフトをDLして使った
どっかのブラウザで変換したのより武蔵のほうがファイルサイズが少なかった･･･→.eot
http://opentype.jp/woffconv.htm
フォントファイル軽量化のための.htaccessの記述
http://web-tan.forum.impressrd.jp/e/2013/12/10/16577
1番目の「webフォントの圧縮」だけやった。.htaccessのことは全然わからないので
色々設定してあとで何かが干渉したりしてわけわかんなくなるのが嫌だから。
.htaccessの記述を間違えていると500エラーがでます。
最後に改行入れるとか変な法則があります。
PR