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」を指定しています。 各々のフォントは以下のOSで使われます。 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つとってもサイトによってこれだけ異なるのですからすごいですね。 それでは。

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