freefielder.jp

前のエントリーの@font-face記述部分の修正です。

フォントには英語名と日本語名があったりします。FireFoxなどは日本語名でフォントを認識してくれますが、Safariは英語名で指定してやらないと駄目みたい。

ということで、「こちらが@font-faceで指定したフォントがユーザのPCにインストールされているときはそちらを使ってね」と思ったら、前回書いた記述ではマズい。またまたみかちゃんフォントを例にすると、

• サーバにアップロードしたフォントファイル名は「mikachan.otf」
• OpenTypeのみかちゃんフォントの英語名は「mikachan_o」
• 日本語名は「みかちゃん_o」
• TrueTypeの英語名は「mikachan」
• 日本語名は「みかちゃん」

なので、CSSはこんな感じになるのかな。
@font-face{ font-family: 'mikachan'; src : url( "mikachan.eot") ; src : local( "みかちゃん_o" ) ,local( "mikachan_o" ) , local( "みかちゃん" ) ,local( "mikachan" ) , url( "mikachan.otf") format( "opentype" ); }

さてさて、いろいろなブラウザで@font-faceの挙動を試してみたのですが、まだまだ実用的ではありませんなぁ。...と、そんな話は、また次回。

関連記事

• 【Linux Mint】OSのダークモード設定がウェブページに反映されないのを直す。
• ウェブページのダークモード化。画像が目立ちすぎるので何とかする。
• ウェブページをダークモード対応にする。
• スタイルシートで矢印を描く。
• position: fixed でヘッダ固定するとアンカーがズレる。直す。
• 【縦書き h2vR.js】最新版のChromeなど一部のブラウザでの表示不具合と、その暫定対処法。
• STAR WARSのオープニングシーケンスをウェブブラウザから弄って遊ぶ。2015年版。
• 「両端揃え」と「均等割付」。
• 【縦書き】h2v.js、均等割付に対応しました。 但し…。
• input type="file" 要素のカスタマイズ。