３OSで表示する英字フォント。
こんばんは、さじです。
CSSのフォント問題の考察です。
Adobeなどで契約しておりますと
ちょいちょい出てくるキーワードが「Webフォント」。
見る人側の環境に委ねることなく、
制作側が意図した見た目でお届けすることが
できるようなのです。
が、大体こういうのって有料なんですよね。
無料でGoogleのWebフォントもあるのですが
うーん。。初心者（自分）にはわかりにくい？
昨日のCSSのグラデーション文字、
もっと綺麗にグラデを出したいので
太いフォントを使いたかったのです。
が、Adobeのwebフォントを使ってしまうと
これを誰かにコピペして使わせることは
おそらく出来ない。。ということがネックでした。
webフォントじゃない、普及されているフォントのまま
サイトに使うことを前提に今回は考えます。
昨日の時点ではこのテーマのデフォルト指定の
ヒラギノ角ゴシックのboldを使用していました。
これです。
Hiragino Bold.
フォント指定なしだとデフォルト使用。
（winだとおそらくMSゴシックで見えてる？）
でも、フォントが細いとせっかくのグラデーションも
なんだかよくわからない。。と残念な結果でした。
webでも見られるんじゃないかなあ、と
arial blackという太いフォントを指定してみました。
が、これです。
Arial Black
macでもwindowsでもGoogleChromeならば
太いフォントで見えている。。はずです。
ところがですね、iPhoneで確認したところ
こんな感じの見え方になっていたんですね。
実際はTimes New Romanじゃなく代替えフォントなので
iOSのデフォルト明朝の何かなのですが
これは自分の意図したフォントではないわけです。
好みなのでこっちのがいいじゃない？って方も
中にはいると思いますが、まあ、それは置いといて。
うむ、これはきっとOSの問題。
自分は基本、iPhoneで書いて読んで
たまにPCで書いたり読んだりします。
文だけならフォントの見栄えも大した問題ではないですが
今回のように、CSSでフォントをデザインすることだと
フォント表示の意味合いが大きく左右します。
せめて、ゴシックと明朝の違いくらいはクリアにしたい。
一通り調べたところ、最新情報としてまとめた
こちらのサイトが非常にわかりやすいです。
メール配信サービスの会社の実践ノウハウ集です。
おそらく、CSSについて明るくないお客さんにも
分かってもらえるように作ったページなのでしょう。
（お客さんじゃないですが、読ませていただきました。）
で、このサイトのずーーっと下の方に
各OSで表示可能なフォントがサンプル付きで出ています。
何種類も載ってるんですが、今回の自分は
全てで表示できるフォントを使いたいので
そこから探して行きますと、これです。
font-family: Verdana;
Verdanaっていうフォント。
これだと、おそらく３OSで同じように見えているはず。
このフォント、あまり聞き覚えがないなあと思ったら
マイクロソフトが開発したフォントでした。 Windows育ち。
でも、なかなかに可愛らしく視認性も良い書体なので
これはぜひ、今後CSSで使っていこう！と思いました。
３OS対応の英字フォントはもう一つこちらもあります。
Arial
font-family: Arial;
もし見出しなどで、ちょっと雰囲気変えたいなって時は
この中から使うと良いかもしれません。
上述のTimes New Romanも３OS使えるみたいです。
英数字だけになりますが、海外の有名な格言とか
紹介したいカフェの名前とかにもいいかもですね。
さじ
