中国語の Web フォントの使用法 (1)_html/css_WEB-ITnose

Windows XP オペレーティング システムを使用している場合、中国語の Web ページを閲覧すると、基本的に Web ページ上のすべての中国語の文字が Song フォントで使用されていることがわかります。これは、中国語の Songti フォントがオペレーティング システムにインストールされ、デフォルトのフォントとして設定されているためです。ブラウザはデフォルトのフォントを使用して Web ページに中国語の文字を表示します。 Windows 7/8 時代に入り、Windows システムのデフォルトのフォントは Microsoft Yahei となり、中国語の Web サイトで使用される漢字のフォントはすべて Microsoft Yahei になります。

例えば、Microsoft Yahei が気に入らず、「Xu Jinglei Handwriting」という別のフォントがコンピュータにインストールされている場合、Web ページ上で中国語の文字を表示するときに使用するフォントを CSS (font-family) で指定できます。このフォントを使用して Web ページに中国語の文字を表示するには、CSS で次のように記述できます:

body {	font-family: '徐静蕾手写体';}

つまり、 コンピューターで Web ページを閲覧すると、 の中国語の文字が表示されます。ウェブページは「Xu Jinglei手書き」フォントを押して、希望どおりに表示します。強調するために「あなた」と「あなたの」という言葉を太字にしていることに注意してください。なぜなら、それが別の人の場合、その人はあなたのコンピュータを使用するのではなく、自分のコンピュータを使用し、あなたのお気に入りの「Xu Jinglei Handwriting」がそのコンピュータにインストールされていないため、その場合、彼のコンピュータではブラウザは「」を認識できなくなります。 Xu Jinglei の手書き」であるため、Web ページ上でこれらの漢字を表示するには、コンピュータのデフォルト フォントしか使用できません。

「Xu Jinglei Handwriting」を使用して Web ページに漢字を表示するのと同じように、Web サイトの訪問者を満足させるにはどうすればよいでしょうか?方法は 2 つあります。まず、これらの閲覧者に、コンピュータに「Xu Jinglei Handwriting」フォントをインストールするように伝えます。このようにして、ブラウザはフォントをページにロードして表示できます。 2つ目はWebフォントであるWebフォントを使用する方法です。

最初の方法では、ページにプロンプ​​ト メッセージを追加して、最高のブラウジング エクスペリエンスを得るために「Xu Jinglei Handwriting」をダウンロードしてインストールしてください だけを必要とします。しかし、実際には、これは非現実的です。Web サイトの訪問者の中に、「フォント」とは何か、ましてやフォントのインストール方法も知らない「コンピュータ初心者」がどれだけいるかは言うまでもありません。たとえコンピュータの知識があったとしても、彼らは、あなたのような「徐静蕾手書き」のファンではないかもしれません。さらに致命的な点があります。私の知る限り、「Xu Jinglei Handwriting」はフリーフォントではなく、有料です。 Founder Electronics は Xu Jinglei 氏にこのフォントをハードペンで書いてもらい、ネットユーザーは 10 元でダウンロードしてインストールできます。

2番目の方法は、いわゆるWebフォントです。まずその基本について話す必要があります。 CSS には @font-face というタグがあり、@font-face 宣言でフォントを宣言し、フォント ライブラリ ファイルをインターネット上のどこかからダウンロードするように指定できます。具体的な書き込み方法は次のとおりです。

@font-face {  font-family: '徐静蕾手写体';  src: url('http://www.webhek.com/徐静蕾手写体.eot'); /* IE9 Compat Modes */  src: url('http://www.webhek.com/徐静蕾手写体.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */       url('http://www.webhek.com/徐静蕾手写体.woff') format('woff'), /* 所有现代浏览器 */       url('http://www.webhek.com/徐静蕾手写体.ttf')  format('truetype'), /* Safari, Android, iOS */       url('http://www.webhek.com/徐静蕾手写体.svg#svgFontName') format('svg'); /* Legacy iOS */}

Web サイトの訪問者が使用するブラウザが上記の CSS コードを参照すると、ローカル システムのフォント ライブラリから 'Xu Jinglei Handwriting' フォントを探すことはなくなります。 http://www.webhek.com/Xu Jinglei Handwriting.eot にアクセスして、使用するフォントをダウンロードします (一時的な使用のため、ユーザーのシステムにはインストールされません)。

これはとても理想的な方法のはずですが、神様は漢字とは相性が良くありません。英語は 26 文字しかなく、英語のフォントのセットは合計で数十 KB しかないため、この方法は英語の Web ページで非常に人気があります。このような小さなフォントをリモート サーバーからダウンロードするのは非常に便利です。ただし、通常の漢字ライブラリには、一般的に使用される数千の漢字が含まれているため、そのサイズは少なくとも 2 ～ 3 MB になります。わずか数百 KB の Web ページを表示するために 2 ～ 3 MB のフォント ライブラリをダウンロードする必要がある場合、第一に、ダウンロードの待ち時間は耐え難いものであり、第二に、ダウンロードは本当に不要です。

フォントの著作権という避けられない問題もあります。英語フォントは文字数が26文字しかなく、半日もあれば描けるので簡単に作成できるため、多くの英語フォントがオープンソースで無料になっています。しかし、中国語フォントライブラリは一人で完成させることはできません。すべての Founder フォントなど、基本的にすべての中国語フォントは営利企業によって開発されています。 Xu Jinglei は 2 か月以上をかけて 6763 文字の漢字を書きました。これらの手書きフォントは、Founder Company によって「Founder Jinglei Simplified」フォント ライブラリに組み込まれ、1 セットあたり 10 元の価格で販売されました。打ち上げから2日目、海賊が発生しました。この問題は避けられないので、以下の内容では言及しません:-(。

そう言えば、あなたも私と同じようにイライラしているのではないでしょうか。

Web プログラマにとって、Web ページは自分の子、すべての Webプログラマーは自分の子供たちを美しく見せたいと考えています。美しいフォントが使用できないのは非常に悲しいことです。実際には、それを使用できないわけではありません。もう少し問題があります。 Web フォント 中国語 Web フォント

を使用する 2 つの方法を次に示します。

总体思路

关键问题就是体积大(回避版权问题)。那么问题的出路就是减小体积。减小体积的方法是从字体库中把当前网页用到的字挑出来，没用到的字丢掉，合并成一个新的、小的字体库文件。

举个例子，我想在页面上突出文章的标题，而本文的标题是“网络字体(Web Font)的中文用法(一)”，一共19个字，那么，我就从“徐静蕾手写体”字体库中将这19个字提取出来，组成一个新的小字体库，暂且叫它“小徐静蕾网络字体”，于是，我们就可以在CSS里这样写：

@font-face {  font-family: '小徐静蕾体';  src: url('http://www.webhek.com/小徐静蕾网络字体.eot'); /* IE9 Compat Modes */  src: url('http://www.webhek.com/小徐静蕾网络字体.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */       url('http://www.webhek.com/小徐静蕾网络字体.woff') format('woff'), /* 所有现代浏览器 */       url('http://www.webhek.com/小徐静蕾网络字体.ttf')  format('truetype'), /* Safari, Android, iOS */       url('http://www.webhek.com/小徐静蕾网络字体.svg#svgFontName') format('svg'); /* Legacy iOS */}

这样的一个只有十几个字的字库，体积不过十几KB，非常适合做网络字体。

相信做技术的人最关心的还是技术问题，程序员可能会问：如何将这些单独的字从字体库中提取出来？然后又如何组成新的字体库文件？鉴于本文的篇幅，我不打算在这里细谈这个问题，但有兴趣的程序员可以先研究一下 FontForge这款开源软件。我将在下一篇文章里详细介绍如何使用PHP动态的提取个体字并将它们合并成小字体文件的方法。这里我要重点讲的不是这种方法，而是第二种方法。

上面说的这种方法要分别生成 .eot、 .woff、 .ttf、 .svg格式的中文字体文件。它的优势在于即使最古老的IE6也支持这种写法。但随着浏览器的进步，现代浏览器的出现，相信这种用法会慢慢的淘汰。在《@font-face的用法》这篇文章里说过，谷歌浏览器、火狐浏览器、Safari浏览器和IE9都支持 .woff格式的字体，并且支持Data URL。于是，如果你的网站只需要兼容现代浏览器，那么，你的CSS里 @font-face的写法只需要这样：

@font-face {  font-family: '小徐静蕾网络字体';  src: url(data:application/font-woff;charset=utf-8;base64, ... ) format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}

大家可以先感受一下这种用法的效果：

徐静蕾手写字体：

请关注我们的微博@歪脖骇客。

汉仪雪峰字体：

请关注我们的微博@歪脖骇客。

胖头鱼字体：

请关注我们的微博@歪脖骇客。

很漂亮不是！可不是图片哟，你可以用鼠标选择单个中文汉字。

首先是从字体库中提取“请关注我们的微博 @歪脖骇客。”这14个字，然后将它们合并新的 .woff格式的网络字体文件，然后将这个 .woff字体文件生成base64编码的字符串，将这些字符串粘贴到CSS里。我在《SVG的用法》这篇介绍过几款能在线生成base64编码的工具，有兴趣的朋友可以试一下。

这种用法的优势在于，只需要一种所有现代浏览器都兼容的字体格式，而且整个字体库文件(很小，只有几十KB)都存放在CSS文件里，不需要浏览器为下载这些字体文件单独建立一次HTTP连接。

小结

我发现网上还是有一些免费开源的中文字体的，Linux系统使用的中文字体就是的，还有一些是字体公司主动免费提供的中文字体。在下篇文章里我将向大家介绍如何用PHP编程的方式将单个中文汉字从字体库中提取出来，并合并成一个新的小字体文件，让我们的中文网页也能简单灵巧的使用web font网络字体。请关注@歪脖骇客，获取本站最新动态。