雑記帳

今さらですが。。。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 に切り替わってくれます。

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

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

 

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

 

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

2018年のfont-family指定





-雑記帳

執筆者:


comment

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

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

関連記事

no image

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

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

no image

【バリュークリエイト交渉術 無料体験ワークショップ】に参加したよ。

【バリュークリエイト交渉術 無料体験ワークショップ】に参加してきました。 無料セミナーなので、バックエンド商材が待ってるんだろうなぁと予想しつつ、 グーグルをはじめ、名だたる企業が取り入れた社員教育っ …

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

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

facebookmail.comからのメールをフィッシングメールかどうか見分ける方法

先日、フェイスブックからフェイスブックページの登録住所について確認のメールが届いた。普段ならメールのリンクは踏まないのだけれど、うっかりポチってしまった!!! 届いたメールがこれ ↓ ↓ ↓ &nbs …

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

メタ情報