2017.02.16 Thursday
このブログのフォントをWebフォントにしてみた。日本語のフォントはAdobe Typekit の「A-OTF UD新丸ゴ Pr6N」、日付の文字は「FreightSans Pro Book」、サイドコラムの見出しは「Private Sans Bold」....
Webフォントを導入する前は、Macではヒラギノ丸ゴシックW4, Windowsではメイリオ、を指定していたんだが、iOSには丸ゴシックが無かったりするので、レスポンシブレイアウトの導入に合わせてWebフォントも設定してみた。
CSSの設定は、
body {
font-family: "a-otf-ud-shin-maru-go-pr6n", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
ついでにカーニングの設定もしてみた。Webでもカーニングできるようになったんだね。感激(^^)
html {
font-feature-settings: "pkna" 1;
}
ひらがな、カタカナの文字間隔が、字形に合わせて狭くなった。
ただ、これだといささか文字が詰まりすぎの感じもするので....
letter-spacingもCSSで設定してみた。たいして変わらないかな(^^;)
html {
font-feature-settings: "pkna" 1;
letter-spacing: 0.02em;
}
カーニングの設定には、ひらがなカタカナだけじゃなくて、全部カーニングする設定もある。句読点とか鍵括弧とかも自動カーニングされてて、この方が綺麗。
html {
font-feature-settings: "palt" 1;
}
でも、その設定だと、Safariにバグがあって、約物(句読点・疑問符・括弧・アクセント)の直後にリンク要素があると、約物の文字の間隔が潰れてしまう。上の画像はSafariの表示で「Queen's Square.... のところ、変だよね(^^;) もう一つ上の画像はFireFoxで、これならOK。そういうわけで、
html {
font-feature-settings: "pkna" 1;
}
にしている。
Webフォントにしたおかげで、MacでもWindowsでもiOSでもAndroidでも、同じフォントが使えるようになったのは良いのだが、表示に少し時間がかかるようになってしまった。それに、ヒラギノ丸ゴシックのほうが何だか読みやすい。
やっぱり元に戻すかどうか思案中(^^;)
Category:MacときどきWin