font face 網路字型的中文用法 一

2021-07-14 03:18:30 字數 1819 閱讀 2590

如果你使用的windows xp作業系統,在瀏覽中文網頁時,你會發現網頁上的漢字基本上全部都是宋體。這是因為你的作業系統裡安裝了中文宋體字庫,而且被設定為預設字型。瀏覽器會用你的預設字型顯示網頁上的漢字。進入windows7/8時代,windows系統的預設字型變成了微軟雅黑,於是,所有的中文**上的漢字使用的字型都是微軟雅黑。

body

於是,當你在你的電腦上瀏覽你的這個網頁時,網頁上的漢字將如你所願的按「徐靜蕾手寫體」字型顯示。請注意,我在「你」和「你的」這幾個字上使用了粗體,表示重點提醒。因為,如果是另外乙個人,他並沒有使用你的電腦,而是使用的他自己的電腦,而他的電腦上並沒有安裝你最喜愛的「徐靜蕾手寫體」,那麼,他的的電腦上的瀏覽器將不能識別』徐靜蕾手寫體』,於是,仍然只能使用電腦裡的預設字型顯示網頁上的這些漢字。

如何讓你的**的瀏覽者也能像你一樣幸福的使用「徐靜蕾手寫體」來顯示網頁上的漢字?方法有兩個。第一,告訴這些瀏覽者,讓他們在自己的電腦上也安裝「徐靜蕾手寫體」字型。這樣他們的瀏覽器就能把這種字型載入到頁面上顯示了。第二種方法是使用web font,也就是網路字型。

@font-face

說到這裡,估計你跟我一樣,覺得灰心喪氣。

對於web程式設計師來說,網頁就是自己的孩子,每個web程式設計師都希望把自己的孩子打扮的漂漂亮亮。看到漂亮的字型而無法用,是一件很傷心的事情。

其實不是無法用,還是有辦法用的,只是麻煩一點。下面說兩種可行的web font中文網路字型的用法。

總體思路

關鍵問題就是體積大(迴避版權問題)。那麼問題的出路就是減小體積。減小體積的方法是從字型庫中把當前網頁用到的字挑出來,沒用到的字丟掉,合併成乙個新的、小的字型庫檔案。

舉個例子,我想在頁面上突出文章的標題,而本文的標題是「網路字型(web font)的中文用法(一)」,一共19個字,那麼,我就從「徐靜蕾手寫體」字型庫中將這19個字提取出來,組成乙個新的小字型庫,暫且叫它「小徐靜蕾網路字型」,於是,我們就可以在css裡這樣寫:

@font-face

這樣的乙個只有十幾個字的字型檔,體積不過十幾kb,非常適合做網路字型。

相信做技術的人最關心的還是技術問題,程式設計師可能會問:如何將這些單獨的字從字型庫中提取出來?然後又如何組成新的字型庫檔案?鑑於本文的篇幅,我不打算在這裡細談這個問題,但有興趣的程式設計師可以先研究一下fontforge

上面說的這種方法要分別生成.eot.woff.ttf.svg格式的中文字庫案。它的優勢在於即使最古老的ie6也支援這種寫法。但隨著瀏覽器的進步,現代瀏覽器的出現,相信這種用法會慢慢的淘汰。在《@font-face的用法》這篇文章裡說過,谷歌瀏覽器、火狐瀏覽器、safari瀏覽器和ie9都支援.woff格式的字型,並且支援data url

很漂亮不是!可不是喲,你可以用滑鼠選擇單個中文漢字。

小結

我發現網上還是有一些免費開源的中文字型的,linux系統使用的中文字型就是的,還有一些是字型公司主動免費提供的中文字型。在下篇文章裡我將向大家介紹如何用php程式設計的方式將單個中文漢字從字型庫中提取出來,並合併成乙個新的小字庫案,讓我們的中文網頁也能簡單靈巧的使用web font網路字型。

via:

font face使用自己的字型

font face使用自己的字型 瀏覽器支援 firefox chrome safari 以及 opera 支援 ttf true type fonts 和 otf opentype fonts 型別的字型。internet explorer 9 支援新的 font face 規則,但是僅支援 eo...

使用 font face載入字型

使頁面顯示電腦沒有的字型 2.定義字型 font face3.引用字型 div wenzi瀏覽器支援 firefox chrome safari 以及 opera 支援 ttf true type fonts 和 otf opentype fonts 型別的字型。internet explorer ...

字型 font face使用方法

字型 font face font face使用方法 font face 屬性值 font family 設定文字的字型名稱 font style 設定文字的樣式 屬性值 normal預設值 italic斜體 oblique傾斜體 inherit從父元素繼承 font variant 設定文字是否大...