雑記帳

今さらですが。。。Appleの San Francisco のダウンロード

投稿日:

San Francisco のダウンロード

次のページからダウンロードできます。
↓ ↓ ↓
Fonts – Apple Developer

「SF-Font.dmg」をWクリックすると、インストール画面が表示されます。
これらのフォントをインストールすれば、Illustrator や PhotoShop から San Francisco が使えるようになります。

実際にフォントをインストールするとたくさんの種類があって驚いた。
どんな違いがあるのだろう。

見出し用には Display 、本文用には Text 。
フォルダの中には、太さが違うファミリーがウルトラライト〜ヘビーまで9種類も入っている。Text の方はさらにイタリック体も含まれ全部で12種ものファミリーが揃っている。
使い方としては、20 ポイント以上では Display を使い、それ未満では Text を使うのがよいとされている。

San Francisco と San Francisco Compact の違い

San Francisco Compact では、より小さな画面でより多くの情報を表示するため、 e や o などの丸いアルファベットの側面が直線的に処理されいる。
San FranciscoSan Francisco CompactのそれぞれにTextDisplayがある。

<参考にさせて頂いたサイト>

 

Webで「San Francisco」を表示させるには?

CSSでフォントファミリーを指定します。しかも 20 pt を境に自動的に Display から Text に切り替わってくれます。

font-family: -apple-system, BlinkMacSystemFont, sans-serif; ;

記号も含めて正確に出力したい場合は、下の指定も追加。

font-family: ".SFNSDisplay-Regular";

ただし、-apple-system や BlinkMacSystemFont で描画されるヒラギノはシステムフォント用に縮小されたもの(パス名は .Hiragino Kaku Gothic Interface)なので要注意。本文だとかなり読みづらくなりますので、font-family ではちゃんとヒラギノも指定してあげましょう。

font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";

 

●Chromではこちらの指定も有効らしい。
この方法では、OS のシステムフォントがレンダリングされるということですので、でMacではSan Franciscoが表示されますが、Windows では下の画像のように Segoe + Yu Gothic UI が出力されます。

font-family: system-ui;

 

<参考にさせて頂いたサイト>

2018年のfont-family指定

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-雑記帳

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

今更ながら…タスク管理ツールを試してみる。asanaとTrelloどっちにするか?

あれこれ複数の案件を抱えていると、 うっかり作業を忘れてしまって大慌てすることがあります。 そうなると納期はないし、他の作業も遅れるし。。。と、 ロクなことがありません(汗) わかっていても、「計画を …

Zoomでビデオ会議をするとき、背景を好きな画像や動画に変更できるゾ!

新型コロナウィルスの影響でリモートワークが注目されています。 早速取り入れたところも多いのではないでしょうか。 なかでも、社内・社外の方々と自宅にいながら打ち合わせができるビデオ会議はとっても便利です …

Eye Google Detail Face Google Logo  - geralt / Pixabay

サーチコンソールから「すべてのデータを1つのプロパティで表示できます。」というメールがきたので設定してみた|Xserverの場合

Googleサーチコンソールチームから下のようなメールがきていた。よくわからないけど、便利そうなのでやってみることにしましたが、初心者にはちょっと敷居が高かったのでメモしておく。 <届いたメールはこん …

アクセス解析「AWStats」をCPIサーバーに設置してみた

アクセス解析スクリプト「AWStats」は、クライアント様のアクセス解析に利用してきたのですが、サイトをリニューアルしてSSLを導入したら、アクセス解析の数値が全部「0」に。。。。。新サイトを公開した …

no image

拡張子「.egg」ファイルをMacで安全に解凍する

お客様からサイトに使用するイメージ画像が届いたけれど、 ファイル名が「○▼×…□.egg」となっていて、 どのアプリケーションで開けば良いのかわからない。 ファイルをWクリックしても開かない。 何かの …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。