Android版Chrome，字體重不尊重系統字體

這裏是一個很好的挑戰，有興趣者：Android版Chrome，字體重不尊重系統字體

我們知道Roboto字體有一個薄版本，而這種字體可以正常通過CSS來指定使用font-weight: lighter或重量值小於400.

與font-weight: 200; font-family: Roboto;規則，我們得到Android上的Firefox選擇正確的字體顯示版本，以及主要的桌面瀏覽器（如果這種字體存在）。

Chrome在Android上有一個不同的想法：它總是選擇Roboto 常規字體。

好吧，也許Chrome不喜歡的語法，讓我們嘗試一些替代方案：

font-weight: lighter; font-family: Roboto;
font-family: 'Roboto Thin';
font-weight: 200; font-family: 'Roboto Thin';

不，鉻還是喜歡普通版更好。

這個怎麼樣？

@font-face { 
    font-family: "Roboto"; 
    font-weight: 200; 
    src: local("Roboto-Thin"); 
} 

font-family: Roboto; 
font-weight: 200;

可悲的是沒有，因爲它變成是一個錯誤，標記爲不固定：http://code.google.com/p/chromium/issues/detail?id=322658

現在，球隊也提供了一種替代方案：

@font-face { 
    font-family: "Roboto"; 
    font-weight: 200; 
    src: local("sans-serif-thin"); 
} 
font-family: Roboto; 
font-weight: 200;

可惜這種情況沒有按」無法使用我們的測試設備（OS 4.1.2，Chrome stable/beta）。

現在在房間裏的大象是退回到Web字體，其中，在Chrome測試版，沒有工作，因爲他們被固定在http://code.google.com/p/chromium/issues/detail?id=167557

但使用系統的默認字體網頁字體回退看似頗爲怪異。另外它確實會導致額外下載並延遲顯示內容。

所以我想知道是否有人對這個問題有更好的解決方法？

測試用例：

http://jsfiddle.net/4CDYW/13/
http://jsfiddle.net/4CDYW/14/
http://jsfiddle.net/4CDYW/15/我使用谷歌的Web字體

來源

2013-11-28 bitinn

我應該注意到Opera也出現這樣的問題，但Safari手機（iOS）卻沒有。所以可能是一個眨眼問題。 – bitinn

此外，我也嘗試過'Roboto-Thin'，'Roboto Thin'或'RobotoThin'，以防萬一... – bitinn

，使用字體重量300和使用 '的Roboto' 作爲字體名稱並沒有問題：

從http://www.google.com/fonts

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'> 

<style> 
body { 
    font-family: 'Roboto', sans-serif; 
} 
</style>

來源

2013-11-29 11:12:20

網絡字體確實有效，正如我所提到的，但我正在尋求一種使用本地安裝字體的方法。 – bitinn

你從哪裏得到字體？我剛剛在本地檢查了我的Roboto字體，並以「Roboto Light」爲名。您可以從Google Web Fonts下載您選擇的字體，並通過複製來自http://fonts.googleapis.com/css?family=Roboto:400,300,500,700的響應中的字體規則並將其替換爲本地使用的字體爲當地的一個。 –

我指的是http://developer.android.com/design/style/typography.html，它提到了瘦。現在你已經提到它了，我需要仔細檢查一下，如果android 4.1確實有這樣的字體。 – bitinn

我的錯誤：的Roboto薄不不上實際存在的Android 4.1（說實話我不知道它是否是4.4，因爲沒有文檔提到它）

所以不要被http://developer.android.com/design/style/typography.html誤導，實際的字體列表在api文檔中：http://developer.android.com/about/versions/android-4.1.html#Fonts，其中Thin不存在。

現在，很顯然只有Roboto Light字體存在，我在上面解決方案再次嘗試，以便Chromium團隊的建議是唯一可行的解決方案：

@font-face { 
    font-family: "Roboto"; 
    font-weight: 200; 
    src: local("sans-serif-light"); 
} 
font-family: Roboto; 
font-weight: 200;

這將讓Firefox和Chrome都使用沒有任何webfont後備的右字體。

來源

2013-11-30 08:10:45 bitinn

Android版Chrome，字體重不尊重系統字體

回答

相關問題