使用谷歌瀏覽器擴展程序打包字體

我想使用Chrome擴展程序以外的標準字體。我對使用Google網絡字體的可能性感到興奮，但似乎可能會導致在您的擴展使用它時在網絡上傳輸網絡字體的懲罰，從而影響到我的擴展的性能。我可以選擇使用擴展名打包字體嗎？可以在所有支持Chrome的平臺上運行（Windows/Mac /等）？在此先感謝使用谷歌瀏覽器擴展程序打包字體

來源

2013-10-06 user2852001

選擇您的字體。舉例來說，我將採取"Stint Ultra Expanded"。有例子，如何將它添加到您的網頁：

<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>

只拿href並在瀏覽器中打開它。你會看到水木清華這樣的：

@font-face { 
    font-family: 'Stint Ultra Expanded'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Stint Ultra Expanded'), local('StintUltraExpanded-Regular'), url(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff) format('woff'); 
}

採取url值的第一個參數從src財產（http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw。 woff）。

下載此文件。

價值srclocal財產作爲文件名（濱鷸超擴展）

簡單的方法是下載它的使用參數使用wget：

wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff

現在創建CSS文件，並添加內容你以前見過。但您必須更改src財產的價值。刪除全部local s並調整url。它應該是水木清華這樣的：

@font-face { 
    font-family: 'Stint Ultra Expanded'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('../fonts/Stint Ultra Expanded.woff') format('woff'); 
}

現在添加您的CSS文件擴展名和使用的字體：

popup.html

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link href='css/fonts.css' rel='stylesheet' type='text/css'> 
</head> 
<body> 

    <span style="font-family: 'Stint Ultra Expanded';">Hello Font</span> 

</body> 
</html>

如果你想在content_script中使用此字體，您必須在您的CSS中調整url：

@font-face { 
    font-family: 'Stint Ultra Expanded'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('chrome-extension://[email protected]@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff'); 
}

你可以在你的css中添加儘可能多的@font-face規則。

注意：local值src屬性告訴你應該使用哪個名稱來存儲它。使用這個名字是個好主意。

第二個通知：如果你使用它像谷歌預期的那樣，你的瀏覽器會檢查這個字體是否已經可用本地。如果情況並非如此，那麼它將被下載並存儲。所以下次它會使用先前存儲的字體。

自Chrome 37（可能更早），您需要提及的字體作爲網絡訪問資源的擴展程序清單中的：

"web_accessible_resources": [ 
    "font/*.woff2" 
]

否則，你會看到這樣的錯誤：

Denying load of chrome-extension://{ID}/font/My Web Font.woff2. 
Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

來源

2013-10-08 09:12:20

這並不適用於封裝應用工作。 'web_accessible_resources'僅適用於擴展程序，託管應用程序和舊版打包應用程序，但這是一個打包應用程序。 –

我似乎無法讓我的Chrome擴展程序彈出工作。 – offthat

確實'web_accessible_resources'只能用於擴展，但只需下載和集成字體（如答案的第一部分所述）就可以在打包的應用程序中正常工作。 – schellmax

要求用戶訪問Google Web Fonts的權限比嵌入它們要少得多（即使這對於最終的離線情況來說可能是完全合理的）。

manifest.json的

"permissions": [ 
    "http://fonts.googleapis.com/", 
    "https://fonts.googleapis.com/" 
],

來源

2014-02-22 00:05:40

這不適用於打包的應用程序，但可用於擴展。 –

@WillScott您是否找到打包應用程序的解決方案？ –

如何將CSS鏈接添加到擴展中？我在清單中試過，但沒有在那裏工作。 – Hannobo

使用谷歌瀏覽器擴展程序打包字體

回答

相關問題