font | 在宅勤務.com

Webページのフォントは、以下のようなcssで、順番にフォントを指定して書いているかと思います。 font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 複数書くのは、OSによって入っているフォントが異なるからです。 ブラウザは、先頭から端末に入っているフォントでレンダリングしようとします。 また、欧文フォントを先に書いておくことにより、一文の中で、英語と日本語が混在した文章の場合にも、想定どおりの表示となります。 今見ていただいているこのページのフォントの指定は、以下となっています。 font-family: "Helvetica neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif ちなみに、最後のsans-serif(サンセリフ)ですが、こちらは総称ファミリ名といわれるもので最後の砦です。 すべてのフォントがなかった場合に、ゴシック体系のフォントで表示してねとブラウザにゆだねるものです。 だいたいのサイトで、最後のフォント指定は、「sans-serif」となっています。 Helvetica neue(ヘルベチカ・ノイエ) ・・・Mac用の欧文フォントArial(エイリアル)・・・Windows用の欧文フォントHiragino Sans・・・Mac用の日本語フォントHiragino Kaku Gothic ProN・・・Mac用の日本語フォントMeiryo(メイリオ)・・・Windows用の日本語フォントsans-serif・・・すべてのフォントがなかった場合の指定 実際に、ブラウザで表示された場合、どのフォントがあたっているかは Chrome DevToolsを使って確認できます。 英語と日本語がまざった文章なので、上記の文章のうち、"Chrome DevTools"(15文字)部分については、Helvetica neueで "を使って確認できます。"(11文字)部分については、Hiragino Sansでレンダリングされているのが確認できます。 意図した通りのフォント表示になっているのが確認できます。 Windowsで見ている方は、おそらく英語部分は、Arial、日本語部分が、Meiryoになっているのではと思います。 実際に、主要なサイトがどんなフォント指定になっているか確認してみます。 Rendered Fontsについては、あくまでも私の端末に入っているフォントなので皆さんの端末では違う結果になる可能性もありますのであしからず。(macOS Catalina/MacBook Pro(2017)) Apple Macbook Airの販売ページを確認します。 https://www.apple.com/jp/shop/buy-mac/macbook-air font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; Apple独自のフォント指定が入っているのが確認できます。 ちなみに、Network resourceとなっているものは、Webフォントで、Local fileとなっているものが端末内のフォントになります。 Microsoft https://www.microsoft.com/ja-jp font-family: 'Segoe UI',SegoeUI,'Yu Gothic UI','Meiryo UI',"Helvetica Neue",Helvetica,Arial,sans-serif; Mac用の日本語フォントは特にしていないようです。 Google https://about.google/ font-family: "Google Sans Display",Arial,Helvetica,sans-serif; Windows用、Mac用の指定は特にしてなさそうです。 Facebook https://www.facebook.com/business/pages/set-up font-family: Helvetica, Arial, "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif; ビジネスのページなので、無難な設定になっています。 Amazon https://www.amazon.co.jp/ font-family: Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif 欧文フォントの指定がありませんでした。 Netflix https://www.netflix.com/ font-family "Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif Netflix Sansは、Netflix独自のフォントのようです。 日本のサイトについてもいくつか確認してみます。 Yahoo!Japan https://www.yahoo.co.jp/ font-family: ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif; 日本のサイトだけあって日本語フォントの指定がしっかりしている印象です。 楽天市場 https://www.rakuten.co.jp/ font-family: Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif; Windowsフォントが先に来ているのは、まだWindowsユーザが多いからですかね。 note https://note.com/ font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif; しっかりと指定している印象です。 NEWSPICKS https://newspicks.com/ font-family: Helvetica,Arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","メイリオ",Meiryo,sans-serif; 読み物系のサイトとそうじゃないサイトでは、フォント指定のこだわりが違いそうですね。 基本私の端末では、日本語は、Hiragino Kaku Gothic Proもしくは、Hiragino Kaku Gothic ProNで表示されていることがわかりました。 フォント1つとってもサイトによってこれだけ異なるのですからすごいですね。 それでは。

いまさらだけどこのページどのフォントでレンダリングされているの？