web-dev-qa-db-ja.com

ウェブサイトでのフォントの使用:ウェブフォントとダウンロードしたフォント

現在、 demy.com のWeb開発コースを行っています。基本的なビデオの1つは、Webサイトでのフォントの使用に関するものでした。講師は、作成/ダウンロードしたものなどの「非標準フォント」を使用するには、ユーザーにフォントをダウンロードしてウェブサイトを適切に表示するよう通知する必要がありますが、その間は代替フォントにリンクする必要があると説明しました。これは、ビデオの隣のディスカッションフォーラムでかなりの論争を引き起こしました。

他のソースから、google.com/fonts(たとえば)のフォントにリンクして、Webサイトで多くの新しいフォントを使用できるようになることを知りました。

私の質問は次のとおりです。ビデオでは、講師が dafont.com からフォントをダウンロードし、それをマシンにインストールしてマシンで単独で動作させる方法を説明しました。私は、ウェブサイトがホストされているサーバーにフォントファイル(.ttf)を配置すると、上記のGoogleフォントの例と同じ方法でフォントファイルにリンクすることはできませんが、代わりにファイルにリンクすることができますか? ?

1
Youngdad33

はい、できます。フォントをサーバーにアップロードして、CSSに以下を追加します。

@font-face {
    font-family: YourFont;
    src: url(YourFont.tff);
}
1
Haim

あなたに与えられた情報は非常に古く、そして非現実的です。なぜなら、ほとんどの人はフォントをダウンロードしてインストールすることに悩まされることができなかったからです。

フォントをダウンロードして、異なるプラットフォーム用に異なるバージョン(フォーマット)を生成し、@font-face経由で使用できます。ただし、フォントの著作権者の許可が必要です。すべてのフォントが無料というわけではありません。また、フォントを合法的に入手した場合でも、Webページでの使用を許可されない場合があります。多くのリポジトリは、フォントがフリーであると違法に主張していることに注意してください。

@font-faceと講義で紹介されたテクニックの違いは、@font-faceが自動的に機能し、ユーザー側で必要なアクションがなく、システムにフォントをインストールせずに(つまり、インストールのためのシステム権限がフォントは必要ありません)。

詳細については、my HTMLで特殊文字を使用するためのガイド を参照してください。

1