CSS3フォント
CSS3 フォント
Web ページでは、CSS の font-family プロパティを使用してフォントを定義できますが、定義されたフォントがユーザーのコンピューターに正しく表示されるかどうかは、ユーザーのコンピューターにフォントがインストールされているかどうかによって異なります。海外の個(gè)人 Web サイトでは非常に美しいフォントが使用されているのをよく見かけますが、これらのフォントは通常ユーザーのコンピュータにインストールされていないため、font-family 屬性を使用して実現(xiàn)することはできません。今日は @font-face 実裝のパーソナライズされた使用方法を紹介します。フォント。
@font-face が CSS3 の新機(jī)能であると言うのは正確ではありません。CSS2 はすでにこの機(jī)能をサポートしており、Internet Explorer はバージョン 5 の時(shí)點(diǎn)でサポートしていましたが、IE は獨(dú)自の eot (Embeded Open) を通じてこれを?qū)g裝しています。 Type) フォント形式。他のブラウザはこの形式をサポートしていません。 @font-face は以下の屬性をサポートしています:
font-family: テキストのフォント名を設(shè)定します。
フォントスタイル: テキストのスタイルを設(shè)定します。
Font-variant: テキストを大文字にするか小文字にするかを設(shè)定します。
Font-weight: テキストの太さを設(shè)定します。
Font-stretch: テキストを橫方向に伸ばすかどうかを設(shè)定します。
Font-size: テキストのフォントサイズを設(shè)定します。
src: カスタムフォントの相対パスまたは絶対パスを設(shè)定します。
必要なフォントを使用してください
新しい @font-face ルールでは、最初にフォントの名前 (myFirstFont など) を定義してから、フォント ファイルを指定する必要があります。
ヒント: URL には小文字のフォントを使用してください。大文字を使用すると IE で予期しない結(jié)果が生じます
HTML 要素にフォントを使用する必要がある場(chǎng)合は、font-family 屬性を通じてフォントを參照してください名前 (myFirstFont):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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,網(wǎng)站終于可以使用字體以外的預(yù)先選擇“合法”字體
</div>
</body>
</html>カラフルなページが必要な場(chǎng)合は、より多くのフォント スタイルが必要です。@font-face ソリューションに加えて、sIFR、Cufon、Typeface.js もあります。簡(jiǎn)単に言うと、.webfont にはフォントにアクセス許可テーブルが埋め込まれており、ブラウザはその許可情報(bào)を読み取って、これらのフォントをダウンロードして表示するかどうかを決定できます。さらに、フォントをサードパーティのサーバー上に配置して呼び出しを行う Typekit も注目に値するソリューションです。これらのソリューションの長(zhǎng)所と短所については、後で詳しく紹介します。
