CSS3フォント

CSS3 フォント

Web ページでは、CSS の font-family プロパティを使用してフォントを定義できますが、定義されたフォントがユーザーのコンピューターに正しく表示されるかどうかは、ユーザーのコンピューターにフォントがインストールされているかどうかによって異なります。海外の個人 Web サイトでは非常に美しいフォントが使用されているのをよく見かけますが、これらのフォントは通常ユーザーのコンピュータにインストールされていないため、font-family 属性を使用して実現することはできません。今日は @font-face 実装のパーソナライズされた使用方法を紹介します。フォント。

@font-face が CSS3 の新機能であると言うのは正確ではありません。CSS2 はすでにこの機能をサポートしており、Internet Explorer はバージョン 5 の時点でサポートしていましたが、IE は独自の eot (Embeded Open) を通じてこれを実装しています。 Type) フォント形式。他のブラウザはこの形式をサポートしていません。 @font-face は以下の属性をサポートしています:

font-family: テキストのフォント名を設定します。

フォントスタイル: テキストのスタイルを設定します。

Font-variant: テキストを大文字にするか小文字にするかを設定します。

Font-weight: テキストの太さを設定します。

Font-stretch: テキストを横方向に伸ばすかどうかを設定します。

Font-size: テキストのフォントサイズを設定します。

src: カスタムフォントの相対パスまたは絶対パスを設定します。

必要なフォントを使用してください

新しい @font-face ルールでは、最初にフォントの名前 (myFirstFont など) を定義してから、フォントファイルを指定する必要があります。

ヒント: URL には小文字のフォントを使用してください。大文字を使用すると IE で予期しない結果が生じます

HTML 要素にフォントを使用する必要がある場合は、font-family 属性を通じてフォントを参照してください名前 (myFirstFont):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体
</div>
</body>
</html>

カラフルなページが必要な場合は、より多くのフォントスタイルが必要です。@font-face ソリューションに加えて、sIFR、Cufon、Typeface.js もあります。簡単に言うと、.webfont にはフォントにアクセス許可テーブルが埋め込まれており、ブラウザはその許可情報を読み取って、これらのフォントをダウンロードして表示するかどうかを決定できます。さらに、フォントをサードパーティのサーバー上に配置して呼び出しを行う Typekit も注目に値するソリューションです。これらのソリューションの長所と短所については、後で詳しく紹介します。

学び続ける

新しいファイル

<html> <head> <meta charset="utf-8"> </head> <style> .font-face-display { font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif; } </style> <body> <div class="font-face-display">Take me to your heart</div> </body> </html>

提出するリセットコード

自動運転