web-dev-qa-db-ja.com

安全なWebフォントとは何ですか？とにかくこの問題の周りにありますか？

美的でブラウザ/ OSに優しいフォントをどのように選択しますか？ Helveticaは大好きですが、多くのWebサイトでは、Windowsユーザーの90％がHelveticaをインストールしていないと言っています。

安全なWebフォントとは何ですか？とにかくこのハードルの周りにありますか？

htmlcsswebsite-designfonts
1
Dat8StringGuy

OSにフォントがインストールされているかどうかに関係なく、選択した任意のフォントをそのまま使用できます。これを行うには、 CSS @ font-face を使用します。これは、ユーザーのブラウザーにデバイスにフォントをダウンロードするよう通知します。ただし、異なるオペレーティングシステムが異なる形式を使用するため、フォントは複数の互換性のあるWebフォント形式として提供される必要があります。これは、適切なオンライン webfont generator を使用することで簡単に実行できます。

Webフォント形式：

ライセンス問題

フォントの提供に関する主な問題はテクノロジーではありません。オペレーティングシステムまたはアプリケーションでフォントを無料で受け取った場合でも、フォントのライセンスでは無料のWeb使用が許可されないためです。ただし、ほとんどのフォントのWeb使用ライセンスを購入できます。

人々はどのようにライセンスの問題を克服しますか？

現在、ほとんどのWebサイトは Google Fonts が提供するオンラインフォントを使用しています。これは、個人用および商用の両方で無料で使用できるためです。 Google検索を使用して他の多くのオープンフォントプロバイダーを見つけるか、 TypeKit と呼ばれるAdobeの有料サービスを使用することを選択できます。

Helvetica Alternative

GoogleのOpen San など、類似したHelvetica代替フォントが多数あります。 CSSを使用すると、フォントファミリの最初にHelveticaを置くことで、実際にフォントArialをWindowsマシンに、HelveticaをMacOSマシンに提供できます。

Mac/Windowsのシステムフォントのリスト

モバイルデバイスは、AndroidやBlackBerryなど、デスクトップコンピューターやラップトップコンピューターとは異なるオペレーティングシステムをよく使用することに注意してください。TypeKitやGoogle Fontsなどのサービスは、この問題を解決するため、より魅力的です。 WindowsとMacOSの両方にインストールされているシステムフォントのリストを以下に示します。

CSSフォントスタックの統計

  • Arial-勝利：99.84％| Mac：98.74％
  • Arial Black-勝利：98.08％| Mac：96.22％
  • Arial Narrow-勝利：88.39％| Mac：94.77％
  • Arial Rounded MT Bold-勝利：59.53％| Mac：95.14％
  • Avant Garde-勝利：0％| Mac：1.08％
  • カリブリ-勝利：83.41％| Mac：38.74％
  • カンダラ-勝利：83.08％| Mac：34.41％
  • 世紀ゴシック-勝利：87.62％| Mac：53.15％
  • フランクリンゴシックミディアム-勝利：99.18％| Mac：2.1％
  • Futura-勝利：1.26％| Mac：94.41％
  • ジュネーブ-勝利：2.08％| Mac：99.64％
  • Gill Sans-勝利：58.54％| Mac：95.5％
  • Helvetica-勝利：7.34％| Mac：100％
  • インパクト-勝利：0％| Mac：95.14％
  • ルシダグランデ-勝利：0％| Mac：100％
  • Optima-勝利：2.52％| Mac：93.69％
  • Segoe UI-勝利：75.36％| Mac：0％
  • Tahoma-勝利：99.95％| Mac：91.71％
  • Trebuchet MS-勝利：99.67％| Mac：97.12％
  • Verdana-勝利：99.84％| Mac：99.1％
  • Serif-Big Caslon-勝利：0％| Mac：92.61％
  • Bodoni MT-勝利：55.81％| Mac：0％
  • Antiquaを予約-勝利：86.09％| Mac：49.01％
  • Calisto MT-勝利：58.43％| Mac：46.31％
  • カンブリア-勝利：83.35％| Mac：35.32％
  • Didot-勝利：0％| Mac：93.51％
  • ガラモンド-勝利：86.47％| Mac：49.91％
  • ジョージア-勝利：99.4％| Mac：97.48％
  • Goudy Old Style-勝利：58.11％| Mac：47.57％
  • Hoefler Text-勝利：0.99％| Mac：92.61％
  • Lucida Bright-勝利：76.12％| Mac：99.64％
  • パラティーノ-勝利：99.29％| Mac：86.13％
  • ペルペトゥア-勝利：66.54％| Mac：0％
  • ロックウェル-勝利：65.94％| Mac：0％
  • Rockwell Extra Bold-勝利：66.1％| Mac：0％
  • バスカービル-勝利：60.35％| Mac：93.33％
  • Times New Roman-勝利：99.67％| Mac：97.48％
  • 等幅コンソラ-勝利：82.97％| Mac：34.77％
  • Courier New-勝利：99.73％| Mac：95.68％
  • Lucida Console-勝利：99.18％| Mac：0％
  • Lucida Sansタイプライター-勝利：74.81％| Mac：99.64％
  • モナコ-勝利：2.74％| Mac：99.82％
  • Andale Mono-勝利：4.16％| Mac：94.59％
  • Fantasy Copperplate-勝利：66.87％| Mac：92.61％
  • パピルス-勝利：70.37％| Mac：92.43％
  • ブラシスクリプトMT-勝利：59.64％| Mac：90.99％
4
Simon Hayter