表示方法を[詳細]に変更する。 ヒラギノ角ゴ Pro, Hiragino Maru Gothic ProN W4 書体としてはサンセリフ(ゴシック体)に分類される。. ヒラギノ明朝 ProN PC の Firefox では等幅フォントが当たり、Chrome だと当たらなかった。さらに iPhone Safari でも等幅にならなかった。どうもブラウザのフォント設定によるようだが、総称ファミリを指定したら普通等幅フォントになりそうなのに、何故…?, どうも Generic Font Family (総称) のみだと日本語が上手く処理できないようだ。しかし、自分が試した限りだと日本語を含まない Web ページでも、英数字が等幅フォントになっていなかった。 が悪いのだろうか?, 原因は分からないが、とりあえず総称ファミリだけ指定するのは上手くいかないケースが多そうだ。, Windows・Mac での等幅フォントというと大体相場が知れているが、iPhone で指定できる等幅フォントはどうなんだろう。, これを見ると、Mac でおなじみの Courier New や Monaco などが存在するようだ。, であれば、Mac や iPhone はコレで決まり。あとはこれに Windows 環境向けの Consolas を追加して、以下のようにしておくとクロスプラットフォーム対応ができるだろう。, 以前記事にしたが、日本語の等幅フォントで Windows・Mac ともに採用されているフォントはないようだ。, Windows には「MS ゴシック」「MS 明朝」などが標準搭載されているが、Mac だと設定をした上でやっと「Osaka-等幅」というフォントが使えるくらい。そして iPhone には Osaka フォントはない。, 僕個人でいうと、Ricty Diminished と MeiryoKe を Windows にも Mac にも入れているので、自分のブログにはコレを指定している。iPhone での日本語等幅は諦めよう…。, CSS で font-family: monospace 指定だと等幅フォントが適用されない?, font-familyのgeneric font familyがiOSやAndroidで日本語フォントに効かない - Qiita, iOS9からのシステムフォント San Francisco を理解する - Qiita, Windows と Mac に標準でインストールされている日本語の等幅フォントってない…? - Corredor, MacのGoogle Chromeの固定幅フォントのデフォルトが等幅ではないOsakaな件 - Qiita, Oracle Autonomous Data Warehouse (ADW) (1), Oracle Autonomous Transaction Processing (ATP) (1), Oracle Cloud Infrastructure Registry (OCIR) (3), Oracle Container Engine for Kubernetes (OKE) (4). この回答へのお礼. Avenir Next Condensed ボールド・イタリック 13.0d1e10, Avenir Next Condensed デミ・ボールド・イタリック 13.0d1e10, Avenir Next Condensed ヘビー・イタリック 13.0d1e10, Avenir Next Condensed ミディアム・イタリック 13.0d1e10, Avenir Next Condensed ウルトラ・ライト・イタリック 13.0d1e10, SignPainter-HouseScript Semibold 14.0d1e1, サイドバーで「すべてのフォント」を選択するか、「検索」フィールドを使って、ダウンロードしたいフォントを探します。ダウンロードされていないフォントは、フォントのリストでグレイ表示になっています。, グレイ表示のフォントを選択し、「編集」>「ダウンロード」の順に選択するか、「control」キーを押しながらフォントをクリックして、ポップアップメニューから「ダウンロード」を選択します。, Founders Grotesk Condensed セミ・ボールド 15.0d1e3, Founders Grotesk Text ボールド・イタリック 15.0d1e2, Founders Grotesk Text レギュラー・イタリック 15.0d1e2, Noto Serif Kannada エクストラ・ボールド バージョン 2.001, PSL Ornanong Pro Demibold Italic 14.0d1e4, Noto Sans Egyptian Hieroglyphs レギュラー バージョン 2.000, Noto Sans Imperial Aramaic レギュラー バージョン 2.000, Noto Sans Inscriptional Pahlavi レギュラー バージョン 2.000, Noto Sans Inscriptional Parthian レギュラー バージョン 2.000, Noto Sans Old South Arabian レギュラー バージョン 2.000, Type Embellishments One LET Embellishments One LET プレーン:1.0 13.0d2e7, 「システム」フォルダの中の「ライブラリ」フォルダ:「/システム/ライブラリ/Fonts」。ここに入っているフォントは、Mac が必要とするもので、Font Book で使用停止にすることはできません。. 2020 iOS7 ipad safari で 全角幅=2半角幅を実現するfontは? 代替フォント:Hiragino Sans、Hiragino Kaku Gothic ProN. 対象となるiPhone、他社製スマートフォンまたはケータイを下取りに出すと、新しいiPhoneが割引になります4。下取りは簡単で安全です。, 最適な支払い方法が選べます。下取りを利用すると、割引価格で購入できます。今使っている通信キャリア向けに、新しいiPhoneの利用開始設定をしたい時もおまかせください。すぐに使えるように、セットアップもお手伝いします。質問や相談は、スペシャリストにいつでもどうぞ。, ケースも、カード入れも、その両方も、磁力でピタッと装着。ワイヤレス充電はさらにすばやく。. この記事では、フォントを指定するための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. Osakaフォントとは、Classic Mac OS日本語版において標準フォント・システムフォントとして使われた日本語フォント。 OS Xにも収録されていた。macOSにおいては追加ダウンロードで使用できる 。. この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント指定などを一から詳しくご説明します。