フォントの使用は Web デザインに不可欠な部分です。多くの場合、Web ページで特定のフォントを使用したいことがありますが、そのフォントは主流のオペレーティング システムの組み込みフォントではないため、ユーザーがページを閲覧するときに実際のデザインが表示されない可能性があります。アート デザイナーが使用する最も一般的な方法は、目的のテキストを画像に変換することです。これにはいくつかの明らかな欠点があります。1. フォントを大規模に使用することは不可能です。2. 画像の内容は、それに比べて変更するのが簡単ではありません。テキストの使用; 3. Web サイトの SEO に役立つフォントの変更は容易ではありません (主流の検索エンジンは、Web コンテンツの関連性を判断する際に画像の代替コンテンツを効果的な要素として使用しません)。インターネット上には、sIFR テクノロジーや JavaScript/フラッシュ ハックを使用する方法がいくつかありますが、実装が面倒か欠陥があります。次に説明するのは、CSS の @font-face 属性のみを使用して Web ページにフォントを埋め込む方法です。
最初のステップ
使用するフォントの 3 つのファイル形式を取得し、フォントが主流のブラウザで正常に表示できることを確認します。
次に解決すべきことは、特定のフォントのこれら 3 つの形式ファイルをどのように入手するかです。通常、フォントの特定の形式のファイルが手元にあります (またはデザイン リソース サイトで見つけました)。最も一般的なものは .TTF ファイルであり、このファイル形式を他の 2 つのファイル形式に変換する必要があります。フォント ファイル形式の変換は、Web サイト FontsQuirrel または onlinefontconverter が提供するオンライン フォント変換サービスを通じて取得できます。ここでは最初のサイトをお勧めします。これにより、フォント ファイルの生成に必要な文字を選択でき (サービスの最後のオプション)、フォント ファイルのサイズが大幅に削減され、このソリューションがより実用的になります。
ステップ2
3 つの形式でフォント ファイルを取得したら、次の手順では、スタイル シートでフォントを宣言し、必要に応じてフォントを使用します。
フォントの宣言は次のとおりです。
@フォントフェイス {
フォントファミリー: 'フォント名レギュラー';
ソース: url('fontName.eot');
src: local('fontName Regular'),
ローカル('フォント名')、
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
}
/* fontName をフォント名に置き換えます*/
ページ内の必要な場所でフォントを使用します。
p { フォント: 13px fontName Regular、Arial、サンセリフ }
h1{フォントファミリー: fontName Regular}
または
<p style="font-family: fontName Regular">月を水に浮かべ、散りゆく花の香りが服を満たす</p>
上記の 2 つの手順で行った例を次に示します。
コードボックスを実行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web ページにフォントを埋め込むための完全なソリューション - CSS9.NET</title>
<link rel="stylesheet" href=" http://www.blueidea.com/articleimg/2009/12/7263/style.css " />
<style type="text/css">
@フォントフェイス {
フォントファミリー: 'hakuyoxingshu7000 Regular';
ソース: url('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
src: local('hakuyoxingshu7000 Regular'), local('hakuyoxingshu7000'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') format('truetype'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') format('svg');
}
＃詩{
フォントサイズ:45px;
フォントファミリー:hakuyoxingshu7000 Regular;
テキスト整列:中央;
}
#詩 p{高さ:30px;行の高さ:30px;}
</スタイル>
</head>
<本文>
<div id="testdiv">
<h1>Web ページにフォントを埋め込むための完全なソリューション - CSS9.NET</h1>
<h2>元のテキストにアクセスします: <a href=" http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a >  ;   ;Web フロントエンド開発に重点を置く- <a href=" http://css9.net">CSS9.NET</a></h2 >
<div id="詩">
<h3>ユンウェイはベジタリアンです</h3>
<p>北京にクラスメートがいて、ベジタリアンレストランで会います。 </p><p>聞き手はまだ話し終えていませんが、話し手は話しすぎています。 </p><p>家は友達でいっぱいで、ヘ・ミンケについて気兼ねなく話し合っていました。 </p><p>禅語で小さな言葉を送り、慎重に優しく話します。 </p>
</div>
</body>
</html>
[Ctrl+A すべて選択 ヒント: 最初にコードの一部を変更してから実行を押すことができます]
上記記事のフォントは以前このブログで公開したペン筆記体フォントを使用していますので気に入ったらダウンロードしてみてください。
この例のソース コードをダウンロードします: Web 埋め込みフォントの例