フォントの使用は、Webデザインの不可欠な部分です。多くの場合、Webページで特定のフォントを使用する必要がありますが、フォントはメインストリームオペレーティングシステムの組み込みフォントではないため、ユーザーがページを閲覧するときに実際のデザインを見ることができないようにします。アートデザイナーが目的のテキストを写真にすることです。 ;3。WebサイトSEOに有利です（主流の検索エンジンは、Webページコンテンツの関連性を判断するための効果的な要因として画像ALTコンテンツを使用しません）。 SIFRテクノロジーまたはJavaScript/Flashハックを使用する方法はインターネット上にありますが、実装は面倒であるか欠陥があります。以下でお話ししたいのは、CSSの @Font-Face属性を介してのみWebページにフォントを埋め込む方法です。
最初のステップ
3つのファイル形式を取得して、フォントを使用して、フォントを主流のブラウザに正常に表示できることを確認します。
.ttfまたは.otf、Firefox 3.5、Safari、Operaに適しています
.eot、インターネットエクスプローラー4.0+用
.SVG、Chrome、iPhoneに適しています
以下で解決したいのは、特定のフォントのこれら3つの形式ファイルを取得する方法です。一般に、そのフォントのいくつかのフォーマットファイル（または設計リソースサイトで既に見つかった）があります。その最も一般的なのは.ttfファイルであり、このファイル形式を介して残りの2つのファイル形式に変換する必要があります。フォントファイル形式の変換は、WebサイトのFontsquirrelまたはOnlineFontConverterが提供するオンラインフォント変換サービスを通じて取得できます。ここでは、最初のサイトをお勧めします。これにより、必要な文字を選択してフォントファイル（サービスの最後のオプション）を生成することができます。これにより、フォントファイルのサイズが大幅に削減され、このソリューションがより実用的になります。
ステップ2
フォントファイルを3つの形式で取得した後、次のステップは、スタイルシートのフォントを宣言し、必要な場合にフォントを使用することです。
フォント宣言は次のとおりです。
@font-face {
font-family： 'fontnameregular';
src：url（ 'fontname.eot'）;
SRC：local（ 'fontname remulation'）、
local（ 'fontname'）、
url（ 'fontname.woff'）形式（ 'woff'）、
url（ 'fontname.ttf'）形式（ 'trueType'）、
url（ 'fontname.svg＃fontname'）format（ 'svg'）;
}
/* fontNameがフォント名に置き換えられます*/
ページで必要なこのフォントを使用してください。
p {font：13px fontnameregular、arial、sans-serif;
h1 {font-family：fontnameregular}
または
<p style = "font-family：fontnameregular">手に月を寄り添うと、倒れた花の香りがあなたの服を満たします</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">
<head>
<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">
@font-face {
font-family： 'hakuyoxingshu7000 Regulary';
src：url（ 'http://www.blueidea.com/articleimg/2009/12/7263/7000.eot'）;
src：local（ 'hakuyoxinghu7000レギュラー'）、ローカル（ 'hakuyoxingshu7000'）、url（ 'http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf'）フォーマット（ 'truetype'）、 url（ 'http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000'）format（ 'svg'）;
}
＃詩{
フォントサイズ：45px;
フォントファミリー：hakuyoxingshu7000レギュラー;
テキストアライグ：センター;
}
#poem p {height：30px; line-height：30px;}
</style>
</head>
<body>
<div id = "testdiv">
<h1> Webページにフォントを埋め込むための完全なソリューション-CSS9.NET </h1>
<h2>元のテキストにアクセス：<a href = "http://css9.net/css-font-face-solution/"> http://cs9.net/css-font-face-solution/ </a >＆nbsp;＆nbsp;＆nbsp; Webフロントエンド開発に従います
<div id = "詩">
<h3>クラウドはベジタリアン</h3>です
<p>首都にはクラスメートがいます。私たちはベジタリアンパビリオンで会います。 </p> <p>リスナーはまだ終わっていませんが、話す人はすでにたくさん話しています。 </p> <p>部屋全体に友達がいます。私は民事科学について話します。 </p> <p>小さな単語を禅で送って、注意して穏やかにしてください。 </p>
</div>
</body>
</html>
[ctrl+aすべての選択のヒント：最初にコードを変更してから実行することができます]
上記の記事のフォントでは、このブログが公開するFountain Running Scriptを使用しています。
この例のソースコードをダウンロード： Webページ埋め込みフォント例
オリジナルテキスト：http：//css9.net/css-font-face-solution/