景観デザインを目指せ

重山陽一郎の個人ブログ blog.enviro-studio.net
<< ブログを「レスポンシブ・ウェブデザイン」にしてみた | HOME | ブログカードをつくるブックマークレットを作ってみた(JUGEMのブログでも使える) >>
ブログのフォントをWebフォントにしてみた
スクリーンショット 2017-02-16 19.15.46
このブログのフォントをWebフォントにしてみた。日本語のフォントはAdobe Typekit の「A-OTF UD新丸ゴ Pr6N」、日付の文字は「FreightSans Pro Book」、サイドコラムの見出しは「Private Sans Bold」....
 
スクリーンショット 2017-02-16 19.13.58
Webフォントを導入する前は、Macではヒラギノ丸ゴシックW4, Windowsではメイリオ、を指定していたんだが、iOSには丸ゴシックが無かったりするので、レスポンシブレイアウトの導入に合わせてWebフォントも設定してみた。

スクリーンショット 2017-02-16 19.14.45
CSSの設定は、
body {
font-family: "a-otf-ud-shin-maru-go-pr6n", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

スクリーンショット 2017-02-16 19.15.23
ついでにカーニングの設定もしてみた。Webでもカーニングできるようになったんだね。感激(^^)
html {
font-feature-settings: "pkna" 1;
}
ひらがな、カタカナの文字間隔が、字形に合わせて狭くなった。
ただ、これだといささか文字が詰まりすぎの感じもするので....

スクリーンショット 2017-02-16 19.15.46
letter-spacingもCSSで設定してみた。たいして変わらないかな(^^;)
html {
font-feature-settings: "pkna" 1;
letter-spacing: 0.02em;
}

スクリーンショット 2017-02-16 19.17.03
カーニングの設定には、ひらがなカタカナだけじゃなくて、全部カーニングする設定もある。句読点とか鍵括弧とかも自動カーニングされてて、この方が綺麗。
html {
font-feature-settings: "palt" 1;
}

スクリーンショット 2017-02-16 19.19.58
でも、その設定だと、Safariにバグがあって、約物(句読点・疑問符・括弧・アクセント)の直後にリンク要素があると、約物の文字の間隔が潰れてしまう。上の画像はSafariの表示で「Queen's Square.... のところ、変だよね(^^;) もう一つ上の画像はFireFoxで、これならOK。そういうわけで、
html {
font-feature-settings: "pkna" 1;
}
にしている。
Webフォントにしたおかげで、MacでもWindowsでもiOSでもAndroidでも、同じフォントが使えるようになったのは良いのだが、表示に少し時間がかかるようになってしまった。それに、ヒラギノ丸ゴシックのほうが何だか読みやすい。
やっぱり元に戻すかどうか思案中(^^;)

Category:MacときどきWin
SEARCH
FEED
FEATURE ARTICLE
CATEGORIES
CALENDAR
S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< September 2017 >>
LINKS
ARCHIVES