Open Sans字體兼容問題解決辦法[font-face]

參考：http://www.tantengvip.com/2014/11/open-sans/

1.font-face使用方法

font-face是CSS3中的一個模塊，主要是把自定義的Web字體嵌入到網頁中

@font-face的語法規則：

@font-face {
font-family: <FontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

 

2.Open Sans字體兼容問題解決辦法

Open Sans字體兼容問題導致瀏覽器不顯示數字，在wordpress的twentytwelve主題中采用了Open Sans字體。這個問題在chrome瀏覽器不存在，但是在360安全瀏覽器極速模式，safari，和百度瀏覽器中遇到了Open Sans字體兼容問題，頁面上只要是數字的地方都顯示空白。后來發現是因為瀏覽器無法顯示Open Sans字體的原因。

 

在wordpress的twentytwelve主題樣式表文件style.css中找到了這一句：

body.custom-font-enabled {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

去掉Open Sans就OK了，原因可能就是瀏覽器無法加載這個字體的緣故。wordpress默認是采用谷歌的字體服務，連接到fonts.googleapi.com，但是速度太慢了，改用了useso的服務器，按理說這個倒沒有什么影響，但是許多瀏覽器頁面上只要是數字的地方就是空白的，css中去掉Open Sans就好了，應該就是Open Sans字體的兼容問題。