CSSでフォントをカスタマイズする方法-CSSチュートリアル-php.cn

CSSでフォントをカスタマイズする方法

青灯夜游

リリース： 2023-01-05 16:11:26

オリジナル

15529 人が閲覧しました

CSS でフォントをカスタマイズする方法: 1. フォントファイルをダウンロードします。 2. 「@font-face」ルールと font-family、src 属性を使用して、フォントファイル、構文「@font-」を導入します。 face{ font-family: 'フォント名';src:url('ファイルアドレス');}"。

CSSでフォントをカスタマイズする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

海外の個人ウェブサイトを閲覧すると、

のような非常に個性的なフォントが必ず見つかりますが、コンピュータにインストールされているフォントは限られているため、見つからないこともよくあります。必要なフォントが見つかったら、css3 が提供する @font-face を使用してパーソナライズされたフォントを実装する必要があります。

しかし、@font-face が CSS3 の新機能であると言うのは不正確です。この機能は CSS2 ですでにサポートされており、当時 IE ブラウザーもサポートしていましたが、他のブラウザーはまだサポートしていないからです。現時点では、すべての主要なブラウザがこの新機能をすでにサポートしています。この機能は具体的にどうやって使うのでしょうか？以下のコードを見てください:

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
    @font-face{
            font-family:myFont;
            src:url(&#39;rajdhani-bold.ttf&#39;)，url(&#39;rajdhani-bold.eot&#39;);
        }
        p{
            font-family: myFont;
        }
    </style>


    <div>
        <p>Ha,those words will be changed.</p>
    </div>

ログイン後にコピー

最初: CSS で @font-face を導入し、font-family を使用して必要なフォント名を設定する必要があります。ここではそれを myFont として使用します (もちろん、あなたのフォントなどもそうです）。

2 番目: 好きなフォントをダウンロードする必要があります。ただし、知っておくべきことは次のとおりです。Firefox、Chrome、Safari、Opera は .ttf (True Type フォント) および .otf (OpenType フォント) タイプのフォントをサポートしています。また、Internet Explorer 9 は新しい @font-face ルールをサポートしますが、 は .eot タイプのフォント (埋め込み OpenType) のみをサポートします。

Font Squirrel (https://www.fontsquirrel.com/) この無料のフォントリソース Web サイトには、ダウンロードできるフォントが数多くあります。そのほとんどは otf および ttf 形式のフォントです。また、defont.com (http://www.dafont.com/) もフリーのフォントリソース Web サイトであり、ダウンロードされる形式は一般的に ttf です。

明らかに、これら 2 つの Web サイトからダウンロードされた主要なフォントは IE ブラウザーと互換性がありません。この目的のために、TTF to EOT Font Converter (https://www.kirsle.net/wizards/ttf2eot.cgi) フォント変換ツールを使用して、IE ブラウザと互換性のある ttf 形式のフォントを eot 形式に変換できます。

ただし、最良のフォント変換ツールは Font Squirrel が提供するジェネレーター (https://www.fontsquirrel.com/tools/webfont-generator) です。入力後、エキスパートオプションを選択して、さまざまなフォント形式を実現します。の間で変換されます。

3 番目: ダウンロード後、ファイルを解凍し、フォント変換ツールを使用して IE と互換性のある eot 形式に変換します。たとえば、 src:url("rajdhani-bold.ttf"), url("rajdhani-bold.eot"); を使用してフォントをインポートします。ここで、URL は相対パスまたは絶対パスです。

4 番目: 現時点では、CSS の font-family を通じて独自のパーソナライズされたフォントを追加できます。

これはカスタムフォントを使用する前のテキストです:

CSSでフォントをカスタマイズする方法