假設我有我的頁面下面的CSS規則：檢測在網頁中使用了哪種字體
body {
font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}
我如何檢測其定義的字體之一，在用戶的瀏覽器中使用？
編輯的人想知道爲什麼我想這樣做：我檢測字體包含字形的不可用在其他字體，當用戶不具有的字體我想顯示一個鏈接，要求用戶下載該字體，以便他們可以使用正確的字體使用我的Web應用程序。
目前我正在顯示所有用戶的下載字體鏈接，我只想爲沒有安裝正確字體的用戶顯示此信息。
我已經看到它在一種不確定的，但非常可靠的方式完成。基本上，一個元素被設置爲使用特定的字體，一個字符串被設置爲該元素。如果爲該元素設置的字體不存在，它將採用父元素的字體。所以，他們做的是測量渲染字符串的寬度。如果它與期望的字體匹配，而不是派生字體，則它是存在的。
這裏是哪裏來的： Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)
另一種使用`canvas`元素中的`measureText`的方法：https://github.com/Wildhoney/DetectFont – Wildhoney 2016-02-24 09:35:01
的作品是看元素的計算樣式的技術。 Opera和Firefox支持這個功能（並且我在safari中進行了偵察，但尚未經過測試）。 IE（至少7）提供了一種獲取樣式的方法，但似乎是樣式表中的任何內容，而不是計算的樣式。在怪異模式的更多細節：Get Styles
這裏有一個簡單的函數搶在元素中使用的字體：
/**
* Get the font used for a given element
* @argument {HTMLElement} the element to check font for
* @returns {string} The name of the used font or null if font could not be detected
*/
function getFontForElement(ele) {
if (ele.currentStyle) { // sort of, but not really, works in IE
return ele.currentStyle["fontFamily"];
} else if (document.defaultView) { // works in Opera and FF
return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
} else {
return null;
}
}
如果這樣做的CSS規則是：
#fonttester {
font-family: sans-serif, arial, helvetica;
}
那麼就應該返回黑體如果安裝了該功能（如果未安裝該功能，則爲宋體，最後爲系統默認的sans-serif字體的名稱）。請注意，CSS聲明中的字體排序很重要。
一個有趣的黑客你也可以嘗試創建大量不同字體的隱藏元素，試圖檢測機器上安裝的字體。我相信有人可以用這種技術製作一個漂亮的字體統計收集頁面。
這將返回像「Helvetica，Arial，sans-serif」這樣的css的完整字符串。它不返回正在使用的實際字體。 – 2013-10-02 18:09:44
@pat實際上，Safari並沒有給出使用的字體，Safari總是返回堆棧中的第一個字體，不管它是否被安裝，至少在我的經驗。
font-family: "my fake font", helvetica, san-serif;
假設黑體是一個安裝/使用，您將獲得：
我在這個問題上採取了一個通過，並創建字體拆分，它測試堆棧中的每個字體，並返回第一個安裝的只有一個。它使用@MojoFilter提到的技巧，但只有在安裝了多個時才返回第一個。雖然它確實遭受了@tlrobinson提及的弱點（Windows將默默地替代Arial for Helvetica並報告已安裝Helvetica），但它運行良好。
我寫了一個簡單的JavaScript工具，你可以用它來檢查是否安裝或沒有的字體。
它使用簡單的技術，大部分時間應該是正確的。
jFont Checker在github
這應該是公認的答案！偉大的工作@Derek。 – mkoistinen 2011-08-27 17:13:19
字體檢測不能解決問題。你可以用它迭代認爲已聲明的字體並檢查什麼是有效的，但是它幾乎沒有提供任何給定div使用什麼字體的信息。如果您從JS創建div，我們如何知道使用哪種字體？ – 2014-08-31 19:55:43
用簡單的形式是：
function getFont() {
return document.getElementById('header').style.font;
}
如果你需要更多的東西完成後，檢查this出來。
有一個簡單的解決方案
function getUserBrowsersFont()
{
var browserHeader = document.getElementById('header');
return browserHeader.style.font;
}
此功能將你到底要什麼。執行時它將返回用戶/訪問者瀏覽器字體類型。希望這會有所幫助
另一種解決方案是通過@font-face自動安裝字體，這可能會否定檢測的需要。
@font-face {
font-family: "Calibri";
src: url("http://www.yourwebsite.com/fonts/Calibri.eot");
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}
當然，它不會解決任何版權問題，但是你總是可以使用免費的字體，甚至可以使自己的字體。您將需要.eot & .ttf文件才能發揮最佳效果。
Calibri是Microsoft擁有的一種字體，不應免費發佈。而且，要求用戶下載特定的字體並不是非常用戶友好的。
我會建議購買字體的許可證並將其嵌入到您的應用程序中。
我使用潤版液。您只需將Fount按鈕拖動到您的書籤欄，單擊它，然後單擊網站上的特定文本。它會顯示該文本的字體。
你可以把Adobe Blank在FONT-FAMILY你想看到的字體後，再用任何字形不在該字體將不會被渲染。
例如：
font-family: Arial, 'Adobe Blank';
據我所知是沒有JS方法告訴這一個元素字形由字體，該元素的字體堆棧正在呈現。
這很複雜，因爲瀏覽器具有serif/sans-serif/monospace字體的用戶設置，並且它們也有自己的硬編碼後退字體，如果在任何字體中找不到字形字體堆棧中的字體。 因此，瀏覽器可能會呈現字體中不在字體堆棧或用戶瀏覽器字體設置中的某些字形。Chrome Dev Tools will show you each rendered font for the glyphs in the selected element。所以在你的機器上你可以看到它在做什麼，但是沒有辦法知道用戶機器上發生了什麼。
用戶的系統也可能在其中扮演一個角色，例如，字形級別的Window does Font Substitution。
所以......
對於您感興趣的字形，你無法知道他們是否會通過用戶的瀏覽器/系統回退中呈現的方式，即使他們沒有字體指定。
如果你想測試它在JS，你可以渲染字體家族的各個字形，包括Adobe空白，並測量它們的寬度，看它是否是零，但你不得不遍歷徹底每個字形和每個字體你想測試，但儘管你可以知道元素字體堆棧中的字體，但是無法知道用戶的瀏覽器配置爲使用什麼字體，所以至少對於某些用戶來說，您需要遍歷的字體列表將不完整。 （如果出現新字體並開始使用，這也不是未來的證明。）
小心謹慎：如果您提供鏈接以下載Calibri，請注意，雖然它是捆綁在多個Microsoft產品中的，是**不是**免費字體，並且您通過提供下載來侵犯版權。 – 2008-09-01 08:18:20
有一點需要記住的是，有些瀏覽器會用相似的字體替換某些缺少的字體，這是使用JavaScript/CSS技巧無法檢測到的。例如，如果未安裝，Windows瀏覽器將替換爲Helvetica的Arial。 MojoFilter和dragonmatank提到的技巧仍然會報告Helvetica已安裝，即使它不是。 – tlrobinson 2008-08-04 01:05:30