Copyright © 概要. ↓で公開されていた追加ダウンロードフォントのアプリをちょっといじって、ipadにこのアプリを入れて、Osaka-Monoをダウンロードさせてみたんですけど、safariだと等倍にならないんですよね... http://mobiletou.ch/2013/10/ios-67%E3%81%A7%E6%B8%B8%E3%82%B4%E3%82%B7%E3%83%83%E3%82%AF%E4%BD%93%E3%82%84%E3%83%92%E3%8…, https://github.com/kishikawakatsumi/DownloadFont, 質問: ヒラギノ角ゴ Pro, Hiragino Maru Gothic ProN W4 概要. ヒラギノ明朝 Pro, Hiragino Sans
表示方法を[詳細]に変更する。 【2020年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例, フォントを指定するためのCSSプロパティ「font-family」の書き方について解説します。, 実際にユーザーの端末に表示されるフォントはユーザー側の閲覧環境に依存します。指定したフォントがユーザーのパソコンやスマートフォンに入っていなければ、意図したフォントで表示されず、代替フォントで表示されます。, WebサイトやHTMLメール全体に対して一括指定をします。一般的にはbodyタグに対してCSSでフォントを指定します。, 日本語フォント・欧文フォント、またフォント名にスペースを含む・含まずを問わず、ダブルクォーテーション（”）、またはシングルクォーテーション（’）の引用符で囲うことが推奨されています。, font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用されます。, font-familyには、各OS表示用の複数のフォント名を指定しておくことが推奨されています。, 理由は、OSのバージョン、メーカー、機種などによってインストールされている日本語フォントがまちまちで、全てのAndroid環境をカバーするには設定が複雑になり過ぎるからです。, macOS Catalinaでは、font-familyに「Hiragino Kaku Gothic ProN（Pro）」を指定しても、正しくフォントが表示されない問題があります。, おすすめのfont-family設定を「ゴシック体」「明朝体」「HTMLメール用」の3つタイプでご紹介します。, ウェブマーケティングに関する情報をお届けするブログです。皆様に役に立つ情報、アップデート、イベントなど、様々なことを発信します。, Yu Gothic UI、Meiryo、ヒラギノ角ゴシック、San Francisco, Hiragino Kaku Gothic ProN 一部のみ表示. 再度ディスカッションを開始するには、新たに質問してください。, iOS7 ipad safari で 全角幅=2半角幅を実現するfontはありますでしょうか？. HTMLメールを作成するためには、CSSの使い方が重要であることは「HTMLメールはどうやって作成するの？基本と特徴を徹底解説！【保存版】」で解説しました。 今回は、CSS初心者向けに、Webサイト制作で実際に使われているCSSの基本的な書き方を詳しく解説します。... メルマガは、顧客の受信箱に直接訴求できるため、2018年でもマーケティング施策の中で、最も高いROI（投資対効果）を誇ります。もちろんこれは正しく表示されるHTMLメール作成を行なってこそ得られる効果です。本記事ではきちんと顧客に届けるためのHTMLメール作成... 今、世界で最も注目を集めるD2Cブランド『Glossier』のメールマーケティング戦略. この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめフォント設定などを一から詳しく説明します。, 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひ正しい設定ができるようにしておきましょう。, CSSのfont-familyプロパティは、WebサイトやHTMLメールのフォントを指定するために使用されます。コンテンツの大半はテキスト情報です。指定したフォント次第で、読み易くも、読み難くもなるため、font-familyはとても重要な役割を果たします。, しかしながら、実際にユーザーの端末に表示されるフォントはユーザー側の閲覧環境に依存します。指定したフォントがユーザーのパソコンやスマートフォンに入っていなければ、意図したフォントで表示されず、代替フォントで表示されます。, font-familyは、あらゆる閲覧環境を想定し、できるだけ多くの環境に対応したフォントを指定しておく必要があります。, 次章からは、具体的なfont-familyの指定方法について解説していきます。CSSの基本をまだマスターしていない方は、以下の記事も参考にしてみてください。, 基本的にフォントは、WebサイトやHTMLメール全体に対して一括指定をします。一般的にはbodyタグに対してCSSでフォントを指定します。, デザインによっては、見出しやメニュー部分のフォントだけを変更したい場合があります。そういう場合には、該当するタグに対してCSSでフォントを指定します。, font-familyプロパティには、「フォントファミリー名」か、「総称フォント名」のいづれかを指定します。, 「Arial」や「メイリオ」など、欧文フォントや日本語フォントの具体的な名称のことフォントファミリー名と呼びます。, font-familyに指定するフォントファミリー名は、正式な固有名称で指定する必要があります。同じフォント名でもOSによって固有名称の表記が異なったり、半角・全角・スペース位置などが間違っていても正しく機能しません。, ゴシック体や明朝体のように、フォントの大きなカテゴリのことを「総称フォント」と呼びます。font-familyに指定できる代表的な総称フォント名は、以下の6つです。, 総称フォントを指定した場合は、通常はOSやブラウザごとに設定されたデフォルトフォントが自動的に選ばれます。, 総称フォントには、sans-serif（ゴシック体）か、serif（明朝体）のいづれかを指定するのが一般的です。cursive（筆記体）、fantasy（装飾文字）については、実際には具体的なフォントが割り当てられず、ゴシック体や明朝体で表示されるため実用的ではありません。, フォントファミリー名は、日本語フォント・欧文フォント、またフォント名にスペースを含む・含まずを問わず、ダブルクォーテーション（”）、またはシングルクォーテーション（’）の引用符で囲うことが推奨されています。, 最新の各ブラウザでは引用符で囲わなくとも実際には機能します。しかし、フォントファミリー名と総称フォント名との区別をする目的と、フォント名の区切りをわかりやすくするためにも引用符で囲っておくというルールに決めておく方が良いでしょう。, フォントファミリー名とは逆に、総称フォント名は引用符では囲わないようにしてください。, もし引用符で囲ってしまうと、フォントファミリー名として認識してしまい、総称フォント名として正しく機能しません。, フォントファミリー名は複数指定が可能です。各フォントファミリー名をカンマ（,）で区切って記述します。カンマの後のスペースは空けても空けなくてもどちらでも構いません。, ※フォントファミリー名に、日本語名（例：メイリオ）と英語名（例：Meiryo）の両方を指定する必要はありません。最近の主要ブラウザは、英語名のみ書いておけば問題ありません。, font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用されます。もしユーザーの端末に、指定したフォントが入っていなければ、次のフォント、また次のフォント…という順番で、ブラウザはフォントを探していきます。, Windows、macOS、iOS（iPhone、iPad）などのOSは、それぞれ標準フォント（初めから入っているフォント）が異なります。font-familyには、各OS表示用の複数のフォント名を指定しておくことが推奨されています。, 「Androidの表示用フォントは？」と思った方もいると思いますが、現状Android表示用のfont-familyは設定する必要はないと思います。理由は、OSのバージョン、メーカー、機種などによってインストールされている日本語フォントがまちまちで、全てのAndroid環境をカバーするには設定が複雑になり過ぎるからです。, Android表示用のフォントは何も指定せず、それぞれの端末のシステムフォント（デフォルト表示フォント）で表示させるの対応で問題ないでしょう。もし最低限の指定をしておきたい場合は、Android端末の代表的な欧文フォント「Roboto」を指定しておいても良いでしょう。, ※Android端末は、明朝体が入っていない場合が多数です。総称フォントで明朝体（serif）を指定しても、ゴシック体（sans-serif）で表示されていると思った方が良いでしょう。どうしても明朝体で表示させたい場合には、Webフォントを利用する方法もあります。, 指定したフォントが全て表示されなかった場合に備えて、最低限の指定として、値の最後に総称フォント（ゴシック体や明朝体）を指定しておきましょう。, 例えば以下のフォント指定例の場合、まずWindowsは、MS Pゴシックが適用されます。次に、macOSにはMS Pゴシックは標準インストールされていないので、sans-serif系のゴシック体フォントが適用されます。, もしfont-familyにフォントファミリー名も総称フォントも指定されなかった場合は、OS・ブラウザごとのデフォルトフォントが適用されます。, 大半のブラウザのデフォルトフォントは、ゴシック体ですが、macOSとiOS（iPhone、iPad）の標準ブラウザSafariだけはデフォルトフォントが明朝体になっています。, また、今後のOSやブラウザのバージョンアップによって、標準インストールフォントや、デフォルトフォントが変更になる可能性もあります。総称フォントは必ず指定しておくようにしましょう。, 以下の例のように、英語部分（半角英数字）に欧文フォント、日本語部分は日本語フォントを指定したい場合があると思います。, この場合のfont-familyの指定方法は、欧文フォント名を日本語フォント名よりも先に指定することで実現できます。, 日本語フォント名を欧文フォント名より先に指定してしまうと、すべてのテキストが日本語フォントで表示されてしまいますので注意してください。, すべてのテキストを日本語フォントで表示したい場合には、欧文フォントは指定しないようにしましょう。, ここからは各OS（Windows、macOS、iOS）の標準フォント（初めから入っているフォント）の中から、多くのWebサイトで使用されている代表的なフォントファミリー名を紹介していきます。, それぞれのフォントの表示例と、font-familyに記述すべき固有名称も合わせて記載しておきます。フォントを選定する際の参考にしてみてください。, ※macOS Mojave10.14.