2018.07.21レシピフォントどの環境でも綺麗なゴシック体、明朝体のフォントを指定するブラウザやOSによって異なるフォントですが、どの環境でも綺麗に表示されるゴシック体/明朝体を指定する方法について解説します。厳密にゴシック体を指定するWindowsでも綺麗な明朝体を指定する閲覧者の環境によって見え方が異なるフォントHTMLのフォントはfont-familyプロパティで指定することができますが、サイトを閲覧する人のOSやブラウザによって表示はかなり異なります。それでも制作の都合上、可能な範囲で表示を同じように見えるよう整えたいものです。そこで今回は、環境ごとのフォントの見え方を確認しつつ、ゴシック体や明朝体に整える方法について解説していきます。Webフォントについては、別記事「Webフォントを使う」をご覧ください。環境ごとのフォントの表示例まずは、font-familyプロパティで指定できるフォントを、それぞれのOS&環境でどのように表示されるか確認していきます。次のHTMLを表示させて確認を行います。ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>font-familyプロパティが標準で用意している次のフォントを試します。Sierra、Windows10Pro、iOSの各ブラウザで表示をしてみした。13.0.3MacとWindowsでは全く見え方が異なっていることは明らかですが、日本語/英数字でもスタイルのバリエーションが全然異なることも分かりました。日本語は3種類か2種類、英数字はしっかりスタイル通りに適用されることが多い印象です。日本語の明朝体はMacやiOSだと総じて綺麗に表示されますが、Windowsだと公式ブラウザであるEdge、IE11はアンチエイリアスがかからずガタガタです。ゴシック体だといずれの環境も問題なさそうです。以上のことから、日本語を扱う際に閲覧環境を問わず、できるだけ等しい表示にするには「sans-serif」がベストと言えそうです。ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>厳密にゴシック体を指定する標準のゴシック体「sans-serif」とは別に、MacやWindowsのシステムフォントであるゴシック体を明示的に指定することがあります。そこで、どの環境でも綺麗なゴシック体が表示されるfont-familyプロパティの指定を紹介します。ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>大きく分けて3つのシステムフォントを指定しています。Proの各ブラウザで表示すると次のようになります。上からIE11、Edge、Firefox、Chromeの順で表示しています。Proで各種ブラウザでのゴシック体の表示例Windowsでも綺麗な明朝体を指定する先述の通り、標準の「serif」はWindowsのEdge、IE11共に微妙な表示となっていましたが、「游明朝」を指定すると綺麗な明朝体が表示されるようになります。ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>大きく分けて3つのシステムフォントを指定しています。Proの各ブラウザで表示すると次のようになります。上からIE11、Edge、Firefox、Chromeの順で表示しています。Proで各種ブラウザでの明朝体の表示例こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。要件を満たすコードをササッと書けて、どこでも通用するような凄いエンジニアになりたい。エンジニアをやっていると、そんな憧れや「個人の能力・スキル」重視の思考に陥ったことが一度はあるのではないでしょうか。本書はそんな個人思考から脱却し、より広い視点を持ちながら効率良い開発を進められるようなエンジニアの参考にすべき考え方が詰まっています。