多言語対応のWebページを制作するときのフォントの話~Part.2~

もう5月の終わりが近づいているこのころ…

気温が安定しているのか安定してないのかのあいまい…

でも、例年より遅めの台風発生…

こっちは早く夏が来てほしい気分でいます!

早く、夏の季節になって…

いや…

その前の厄介なシーズンが…

今年は「気象病」にならないことを…

話変わりますが…

多言語対応のWebページを制作するときのフォントの話~Part.2~

ある業者からの依頼で、多言語対応のページ作成の依頼がありました。

しかし、ある業者の多言語対応のフォントの制定がホンマにめちゃくちゃなんですなぁ…

Webのプロとしてホンマに恥ずかしいって言いたいぐらいなんですね!

多言語対応のフォントの設定をするとき、皆さんは日本語のフォント設定を使ってますか?

正解は「ドアホ!

~ここまでグチグチのコピペ~

昨日は、英語サイトのフォントの種類をご紹介しました。

しかし、英語のフォントを対応する種類が悩みますよね…

MacintoshWindowsに搭載されている標準フォントの種類がわからないところがありますね。

それが悩ましい種ですね…

スポーツチーム以外に、大手企業のサイトをいろいろググってみました。

皆さんがよく知っている大手企業の英語のサイトをピックアップしました。

大手企業のフォントの設定はどうしてるか検証してみましょう!

英語:マイクロソフト
font-family: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;

英語:Apple
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;

英語:Amazon (ECサイト)
font-family: "Amazon Ember",Arial,sans-serif;

英語:HP (ECサイト)
font-family: FormaDJRMicro,-apple-system,BlinkMacSystemFont,sans-serif;

英語:DELL (ECサイト)
font-family: Roboto,'Cordia New',"Microsoft Sans Serif",Utsaah,'Devanagari MT','Nirmala UI',Latha,InaiMathi,Gautami,'Telugu Sangam MN',Tunga,'Kannada Sangam MN',Kartika,'Malayalam Sangam MN',Shruti,'Gujarati MT','Gujarati Sangam MN',Vrinda,'Bangla Sangam MN','Meiryo UI','メイリオ','MS UI Gothic Reg','Hiragino Kaku Gothic Reg','ヒラギノ角ゴ Pro W3 Reg','Microsoft YaHei','微软雅黑','Hiragino Sans GB','Microsoft JhengHei','微軟正黑體','Malgun Gothic','맑은 고딕',Gulim,AppleGothic,'Apple LiGothic','LiHei Pro',Osaka,STHeiti,'华文黑体',STXihei,'华文细黑',SimHei,'黑体','Arial Unicode MS',Arial,sans-serif;

英語:Disney
font-family: "InspireTWDC","Helvetica Neue Light","Helvetica Neue","Helvetica","Arial",sans-serif;

英語のサイトのフォントを見るとほとんど、オリジナルのフォントを使われてるんですね。

ただ、びっくりしたのがDELLのサイトのフォントの種類がいっぱい設定されてるんですね…

ただ、共通するものが「Helvetica」・「Arial」ですね。

最終的に、英語のサイトのフォントを設定するなら、これしかないでしょうか?

font-family: "Helvetica","Arial",sans-serif;

または、Google Fontsを読み込ませて連携する方法もありますね。

いろんな米国のサイトをググりながらFontの設定はどうしてるか、いろいろ検証しながら展開していくのもいいですね。

ただ、「技術の過信」はダメですよ!

では、また!

コメントする

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

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

Leonard-Blogをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む