Metro Windows 8 のようなスタイルの Web サイトには、どのフォントをお勧めしますか (商用利用は無料)? Google Fontsなどにあれば最高です。
2 に答える
「Metro」ブランドで使用されるフォントはSegoe UIです。残念ながら、他の人が述べたように、無料でダウンロードすることはできません。
ただし、たまたま Segoe を使用していても、Web アプリケーションの他のユーザーは使用していない可能性があります。したがって、ユーザーに一貫して表示するには、それが必要に@font-face
なります。しかし、残念なことに、ライセンスのために、単純にサーバー上でホストしてフォント フェースにすることは法律違反となります。Segoe UI を使用する唯一の合法的な方法は、ライセンスを購入して使用することです。
ただし、無料のオプションが必要な場合は、Segoe に似たものをいくつか見てみましょう。
Segoe UI はFrutigerと信じられないほど似ています。実際、Microsoft は Linotype によって訴訟を起こされたほど似ていますが、もちろん、そのフォントも無料ではありません。
特に Google フォントを使用したい場合は、人気のあるOpen Sansが最善の策かもしれませんが、Segoe との間にいくつかの顕著な違いがあります.
あまり知られていないが、有名で高価なフォントに大きな影響を受けているフォントを見つけることができれば、幸運に恵まれるかもしれません (恥知らずなぼったくりと呼ぶ人もいます)。2 つの例はCartoGothic StdとWeblySleek UIです。ほとんどのユーザーにとって、これらのフォントの違いはほとんどわかりません。幸運なことに、これを書いている時点では、たまたまこれらのフォントをホストして提供することができます@font-face
(免責事項: これを行う前に、詳細についてライセンスを読むことをお勧めします。変更する)。
簡単に比較したいですか?OSX 上の Photoshop でレンダリングされた画像を次に示します。フォントサイズはすべて10pt程度です。そして、それらはすべて通常の重量または本の重量に設定されています。
ご覧のとおり、最初の 3 つのフォントと Open Sans の最大の違いは、小文字のgです。大文字の違いは他にもあると思いますので、それらの詳細を調べてみることをお勧めします。
Segoe UI
Segoe UI http://jmeas.com/stackoverflow/segoe.jpg
フルティガー
Segoe UI http://jmeas.com/stackoverflow/frutiger.jpg
カルトゴシックSTD
Cartogothic STD http://jmeas.com/stackoverflow/cartogothic.jpg
WeblySleek UI
カルトゴシックSTD http://so.jmeas.com/weblysleek.jpg
オープンサンズ
Open Sans http://jmeas.com/stackoverflow/open-sans.jpg
それらのいずれかがあなたのニーズに合うことを願っています。
メトロとまったく同じにしたい場合は、http://www.fontsquirrel.com/を使用してフォントをアップロードできます。
注:コメントに記載されているように、fontsquirrel を使用する場合は、フォントのライセンスがあることを確認してください。
それ以外の場合は、おそらくHelveticaまたはArialです。これらは、私が考えることができるクローゼットの Web セーフ フォントです。
新しい Metro フォントは Sans Serif フォントで、Arial は常に Windows に最も近い Sans Serif フォントです。
また、このGoogleフォントとメトロフォントのロゴを使用していますが、かなり似ているように感じます.
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet" type="text/css">
Microsoft の Web サイトも参照してください。彼らはこのフォントファミリーを使用しています..font-family: segoe ui, verdana, arial, sans-serif;
http://windows.microsoft.com/en-US/windows/home
また、この投稿をチェックしてください。非常に似ているようです。 https://superuser.com/questions/336031/what-font-is-used-on-windows-8-or-windows-phone-7