Century Gothic代替フォント iOS 9以降版
「 Century Gothic の代わりは Heiti J あたりで？」はもう 5年も前の記事ですが、いまでも少ないながらコンスタントにアクセスがあり、そのためかえって忸怩たる思いをしていましたので、ここいらで 2016年時点の改訂版を載せておくことにします。
Century Gothicの iOS環境における代替フォントとして、前掲記事では中国語フォントファミリーである「 Heiti SC / TC」を挙げているわけですが、Heiti SCおよび Heiti TCのフォント指定が有効なのは iOS 8までです。なので、さらにその代替となる、いま現在使えるフォントを以下に挙げておきます。
なお、じっさいの各フォントの見た目については最後にまとめて載せています。
iOSフォントのなかから選ぶなら「 Avenir-Light」。数字はけっこう近い。
あくまで iOSフォントのなかから代替を探すなら、Heiti SC / TCほどに似ているフォントは「ない」というのが結論になるのですが、強いて、いちばん雰囲気が近いかなというのは「 Avenir-Light」でしょうか。とくに数字だけ取り出すならば、まあまあいい感じです。「 a」とかぜんぜんちがう字形ですけど。
これで行く場合は、
font-family: 'Avenir-Light', sans-serif;
で適用できます。太くなるごとに似なくなっていく印象（あくまで印象）はありますが、もちろん、
font-family: 'Avenir-Book', sans-serif; font-family: 'Avenir-Roman', sans-serif;
等もあります。
Google Fontsに手を出すのであれば、「 Questrial」か「 Muli」。
iOSフォントから選ばないといけない理由はもちろんなく（ Heiti SC / TCがそうだったようにけっこう変化はげしいですしね）、ことは英文フォントの話なので、いっそ Google Fontsに視野を広げてもいいでしょう。その場合、いちばん似てるのはおそらく「 Questrial」か「 Muli」です。こっちは両者ともアルファベット側が似ています（数字は似てません）。
「 Questrial」なら、
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
か
<style>
@import url('https://fonts.googleapis.com/css?family=Questrial');
</style>
でフォントを読み込んで、
font-family: 'Questrial', sans-serif;
とします。
「 Muli」の場合には regular (400) のほかに light (300) もあるので、それも含めるとして、
<link href="https://fonts.googleapis.com/css?family=Muli:300,400" rel="stylesheet">
か
<style>
@import url('https://fonts.googleapis.com/css?family=Muli:300,400');
</style>
で読み込み、
font-family: 'Muli', sans-serif;
とか
font-family: 'Muli', sans-serif; font-weight: 300;
とかします（後者が lightを指定する場合）。
じっさいの見た目
スクリーンショット (Safari + OS X Yosemite)
スクリーンショット (Safari + iOS 10 / iPhone 6 Plus)
※当然ながら Century Gothic（いちばん上）は標準フォントに置き換わっています。
実サンプル
century gothic:
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
...1234567890!"#$%&'()-+=^~|[]{}*
Avenir-Light:
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
...1234567890!"#$%&'()-+=^~|[]{}*
Questrial:
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
...1234567890!"#$%&'()-+=^~|[]{}*
Muli (400):
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
...1234567890!"#$%&'()-+=^~|[]{}*
Muli (300):
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
...1234567890!"#$%&'()-+=^~|[]{}*
関連記事
トラックバック(0)
トラックバックURL: https://web-conte.com/blue/mt-tb.cgi/1072