如何判斷'font-family'請求是否得到尊重，以便我可以在必要時替換圖像？

Question

我有一個CSS文件，它使用@font-face來引用聯網服務器上的字體資源。 如果CSS font-family請求由於服務器不可用而失敗，我是否可以編寫客戶端JavaScript來將圖像替換為樣式文本？

Answer 1

我寫這個作為我沒有正確閱讀的問題的答案所以我想我會在這里發布它：

正如@James_Hill所說，你可以嘗試使用這個javascript 字體檢測器庫。 下面的代碼段包含庫的完整代碼（因為我無法在外部加載它），但看看代碼片段的末尾，您將看到一個非常簡單的循環來檢查計算機上可用的字體。

var detective = new Detector();
var fonts_to_test = ["Non-existent Font", "Quaver Serif", "Times New Roman", "Serif"]
fonts_to_test.forEach((font_name) => {
  console.log(font_name, ":", detective.detect(font_name))
})

如果fonts_to_test與您的font-family設置相同（具有相同的順序）。 您可以縮小數組並找到使用的字體：

var font_used = fonts_to_test.reduce((result, font_name) => !result && detective.detect(font_name) ? font_name : result, false)

 /** * JavaScript code to detect available availability of a * particular font in a browser using JavaScript and CSS. * * Author : Lalit Patel * Website: http://www.lalit.org/lab/javascript-css-font-detect/ * License: Apache Software License 2.0 * http://www.apache.org/licenses/LICENSE-2.0 * Version: 0.15 (21 Sep 2009) * Changed comparision font to default from sans-default-default, * as in FF3.0 font of child element didn't fallback * to parent element if the font is missing. * Version: 0.2 (04 Mar 2012) * Comparing font against all the 3 generic font families ie, * 'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3 * then that font is 100% not available in the system * Version: 0.3 (24 Mar 2012) * Replaced sans with serif in the list of baseFonts */ /** * Usage: d = new Detector(); * d.detect('font name'); */ var Detector = function() { // a font will be compared against all the three default fonts. // and if it doesn't match all 3 then that font is not available. var baseFonts = ['monospace', 'sans-serif', 'serif']; //we use m or w because these two characters take up the maximum width. // And we use a LLi so that the same matching fonts can get separated var testString = "mmmmmmmmmmlli"; //we test using 72px font size, we may use any size. I guess larger the better. var testSize = '72px'; var h = document.getElementsByTagName("body")[0]; // create a SPAN in the document to get the width of the text we use to test var s = document.createElement("span"); s.style.fontSize = testSize; s.innerHTML = testString; var defaultWidth = {}; var defaultHeight = {}; for (var index in baseFonts) { //get the default width for the three base fonts s.style.fontFamily = baseFonts[index]; h.appendChild(s); defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font h.removeChild(s); } function detect(font) { var detected = false; for (var index in baseFonts) { s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback. h.appendChild(s); var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]); h.removeChild(s); detected = detected || matched; } return detected; } this.detect = detect; }; var detective = new Detector(); var fonts_to_test = ["Non-existent Font", "Quaver Serif", "Times New Roman", "Serif"] //test each font for availability fonts_to_test.forEach((font_name) => { console.log(font_name, ":", detective.detect(font_name)) }) //reduce example var font_used = fonts_to_test.reduce((result, font_name) => !result && detective.detect(font_name) ? font_name : result, false) console.log("Font Used:", font_used) 

Answer 2

我偏愛這個字體檢測助手： http ： //www.lalit.org/lab/javascript-css-font-detect/

包含.js文件后，以下是示例用法：

// Usage
var detective = new Detector();
alert(detective.test('font name'));

Answer 3

我會建議完全反對這種方法。 一個文本出現在給定字體中的絕對關鍵是什么？ 我打賭你的用戶更願意使用常規文本。

有幾個問題-第一，可訪問性。 您必須非常小心，以確保在這些圖像中插入正確的alt標簽。 如果JS阻塞，刪除了文本，但未正確加載圖像會怎樣？

二-可維護性-這些替代圖像將如何生成？ 如果你要創建一個永遠不會永遠改變的三頁網站，那么這是可行的。 除此之外，這將是一場維護噩夢。

@ font-face的使用是網頁設計師工具包的一個受歡迎的補充，但它仍然是一個“很好的”視覺蓬勃發展 - 它只比邊界半徑稍微重要一點。

我喜歡擁有它，我喜歡使用它，但我認為如果它不會發生火災，那么使用類似的“后備”網絡安全字體會更好。 您的訪客會看到Georgia而不是Adobe Caslon Pro嗎？ 當然。 但是我認為，與將圖像推到適當位置相比，它們會更好。