font face中 iefix的詳解

2021-08-09 10:07:48 字數 2531 閱讀 2387

在使用@font-face中引入網路字型的時候,常常在引入兩個相同的路徑。其中乙個末尾新增 #iefix 處理相容問題。

如:

@font-face

這究竟是處理什麼問題呢?讓我們從歷史原因來講。

之所以把它們放到一起是因為首個實現 @font-face 和 eot 的是同一家公司 - 微軟。早在九十年代 css 就有了自定義字型的語法,ie4是首個實現此語法的瀏覽器,沒錯,就是ie。不過,字型格式只能是微軟自己開發的 eot(embedded open type) 格式。eot 允許字型的作者保護字型不被非法複製,微軟不允許其他瀏覽器廠商使用該格式,因此它只能在 ie 下使用。

這對當時來說太超前了。還記得在 windows xp 下看使用了『微軟雅黑』的網頁嗎?當時的系統用一種簡單的灰階反鋸齒技術,對於系統的字型這足夠了,但對於其他字型,由於缺少人工的優化,字型會變得很虛。因此,本來想改進網頁的排版效果,結果卻使文字都無法閱讀。

於是,css2.1 中徹底去掉了 @font-face 語法也不足為奇了。

大約十年後,在2023年,safari 3.1 重新支援了 @font-face , 並且可以使用最普遍的字型格式 ttf 以及 otf。其實這得益於液晶顯示器(lcd)的普及,lcd 提供了更高的解析度以及通過亞畫素渲染(subpixel rending)的反鋸齒(anti-aliasing)技術。這樣,即使字型很小,也能看得很清楚。

微軟稱這種技術為 cleartype。在 mac os x 平台上 subpixel rending 是預設開啟的,但在 windows 平台上只有 windows vista 以及之後的版本才會預設開啟。因此回到上面的問題,由於『微軟雅黑』不是 xp 的系統字型,xp 預設沒有開啟 cleartype,因此當在裝有『微軟雅黑』字型的 xp 上訪問將字型設為『微軟雅黑』的網頁時,看起來會很模糊。不過,手動開啟 cleartype 後便可以解決此問題。

一年後,firefox opera chrome 等主流瀏覽器都開始支援 @font-face。

又過了一年,2023年,幾乎所有主流瀏覽器都支援了 @font-face , 甚至是 ie,從 ie9 開始微軟摒棄了自己的 eot 字型開始支援 ttf otf 等主流字型格式。在移動端,ios 從4.2開始也支援這些字型格式。

自此,@font-face 死而復生。 web字型時代來臨。

上面 css 宣告中使用了 4 種字型格式,其中 eot 格式前面已經提過,它是 ie 的專有格式,下面看一下餘下的 3 種格式。

先說 svg 格式,ios 在 4.2 之前僅支援 svg 格式的字型,由於 svg 格式不能壓縮,通常會比較大。鑑於 ios 老版本漸漸被淘汰,因此可以考慮去掉此格式。

truetype(.ttf) 是目前最普遍的字型格式,早在八十年代就被蘋果開發出來,當時它作為一種可伸縮的字型格式用來代替位圖字型在螢幕上顯示,不久微軟也接受了這個格式,由於該格式可以針對特定大小做精準的微調,漸漸地成為系統字型的標準。

說到 truetype 不得不提一下 opentype,它在 css 中的出鏡率也很高。opentype 可以看作是 truetype 的公升級版,由微軟和 adobe 聯合開發。opentype 採用不同於 truetype 的演算法儲存路徑,單從這點來講 opentype 有兩個主要優勢:1.平均比 truetype 小 20% 到 50%。2.需要較少的用於反鋸齒的微調資訊(詳見下面的參考鏈結)。除此之外,opentype 除基本字符集外還提供了別的擴充套件,比如小號大寫字元,老式的數字,以及其他一些圖形。既然 opentype 有這麼多優點,那為什麼我們上面的**中沒用使用 opentype 呢?首先,微軟建議如果只需要在螢幕上顯示文字推薦用 truetype 格式。如果需要更大的字符集和更好的列印效果才推薦 opentype 。其次,支援 opentype 的瀏覽器都支援 truetype。

最後,也是最新出現的是 woff (web open type format)。woff 屬於 w3c 的推薦標準。由兩名字型設計師和兩位 mozilla 的開發者設計。最早在 firefox 3.6 上實現。事實上,woff 並不是一種新的字型格式,它只是包裝 truetype 和 opentype 並進行壓縮,壓縮後可以使 truetype 減少 40% 。除此之外,它還允許新增元資訊,比如字型作者的許可證,不過瀏覽器並不對這些許可做任何驗證。

ie9之前的版本沒有按照標準解析字型宣告,當 src 屬性包含多個url 時,它無法正確的解析而返回 404 錯誤,而其他瀏覽器會自動採用自己適用的 url。因此把僅 ie9 之前支援的 eot 格式放在第一位,然後在 url 後加上?,這樣 ie9 之前的版本會把問號之後的內容當作 url 的引數。至於 #iefix 的作用,一是起到了注釋的作用,二是可以將 url 引數變為錨點,減少傳送給伺服器的字元。

絕大多數情況下,第乙個 src 是可以去掉的,除非需要支援 ie9 下的相容模式。在 ie9 中可以使用 ie7 和 ie8 的模式渲染頁面,微軟修改了在相容模式下的 css 解析器,導致使用 ? 的方案失效。由於 css 直譯器是從下往上解析的,所以在上面新增乙個不帶問號的 src 屬性便可以解決此問題。

文章**:

font face的相容寫法

例如 font face 使用指定字型 test一 turetpe ttf 格式 ttf字型是windows和mac的最常見的字型,是一種raw格式,因此他不為 優化,支援這種字型的瀏覽器有 ie9 firefox3.5 chrome4 safari3 opera10 ios mobile safa...

font face的相容寫法

font face的相容寫法 font face 使用指定字型 test一 turetpe ttf 格式 ttf字型是windows和mac的最常見的字型,是一種raw格式,因此他不為 優化,支援這種字型的瀏覽器有 ie9 firefox3.5 chrome4 safari3 opera10 ios...

font face使用自己的字型

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