javascript - style - html font type




檢測網頁中使用了哪種字體 (8)

@pat實際上,Safari不會提供使用的字體,Safari至少在我的經驗中總是返回堆棧中的第一個字體,無論它是否已安裝。

font-family: "my fake font", helvetica, san-serif;

假設Helvetica是安裝/使用的,你會得到:

  • Safari中的“我的假字體”(我相信其他webkit瀏覽器)。
  • “我的假字體,helvetica,san-serif”在Gecko瀏覽器和IE瀏覽器中。
  • Opera 9中的“helvetica”,不過我讀到他們在Opera 10中改變了這一點以匹配Gecko。

我在這個問題上做了一個通過,並創建了Font Unstack,它測試了堆棧中的每種字體並返回第一個安裝的字體。 它使用@MojoFilter提到的技巧,但只有在安裝了多個時才返回第一個。 雖然它確實遭受了@tlrobinson提及的弱點(Windows將默默地替代Arial for Helvetica並報告已安裝Helvetica),但它運行良好。

FontUnstack

假設我的頁面中有以下CSS規則:

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

如何檢測在用戶瀏覽器中使用了哪一種定義的字體?

編輯為人們想知道為什麼我想這樣做:我檢測的字體包含其他字體中沒有的字形,而當用戶沒有字體時,我想顯示一個鏈接,要求用戶下載該字體,以便他們可以使用正確的字體使用我的Web應用程序。

目前我正在顯示所有用戶的下載字體鏈接,我只想為沒有安裝正確字體的用戶顯示此鏈接。


Calibri是Microsoft擁有的一種字體,不應免費發布。 而且,要求用戶下載特定的字體並不是非常用戶友好的。

我會建議購買字體的許可證並將其嵌入到您的應用程序中。


另一種解決方案是通過@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文件才能最好地工作。


您可以在要查看的字體後面將Adobe空白放入font-family中,然後不會呈現任何不在該字體中的字形。

例如:

font-family: Arial, 'Adobe Blank';

據我所知,沒有JS方法可以通過該元素的字體堆棧中的哪種字體來呈現元素中的哪些字形正在呈現。

這很複雜,因為瀏覽器具有serif / sans-serif / monospace字體的用戶設置,並且它們也具有自己的硬編碼後退字體,如果在字體中找不到任何字體中的字形字體堆棧。 因此,瀏覽器可能會呈現字體中不包含字體堆棧或用戶瀏覽器字體設置的字形。 Chrome開發工具將向您顯示選定元素中字形的每種渲染字體 。 所以在你的機器上你可以看到它在做什麼,但是沒有辦法知道用戶機器上發生了什麼。

用戶的系統也可能在其中扮演一個角色,例如Window在字形級別進行字體替換

所以...

對於您感興趣的字形,即使沒有您指定的字體,也無法知道它們是否會由用戶的瀏覽器/系統回退渲染。

如果你想用JS測試它,你可以用包括Adobe Blank在內的字體系列渲染單個字形,並測量它們的寬度以查看它是否為零, 但是你必須遍歷每個字形和每個你想測試的字體 ,但儘管您可以知道元素字體堆棧中的字體,但無法知道用戶的瀏覽器配置為使用哪種字體,因此至少對於某些用戶而言,您遍歷的字體列表將不完整。 (如果新字體出來並開始使用,這也不是未來的證明。)


我已經看到它以一種不確定的方式完成,但非常可靠。 基本上,一個元素被設置為使用特定的字體,一個字符串被設置為該元素。 如果為該元素設置的字體不存在,它將採用父元素的字體。 所以,他們做的是測量渲染字符串的寬度。 如果它與期望的字體匹配,而不是派生字體,則它是存在的。

以下是它的來源: Javascript / CSS字體檢測器(ajaxian.com; 2007年3月12日)


我正在使用Fount。 您只需將Fount按鈕拖動到您的書籤欄,單擊它,然後單擊網站上的特定文本。 它會顯示該文本的字體。

https://fount.artequalswork.com/


有效的技術是查看元素的計算風格。 Opera和Firefox支持這個功能(並且我在safari中進行了偵察,但尚未經過測試)。 IE(至少7)提供了一種獲取樣式的方法,但似乎是樣式表中的任何內容,而不是計算的樣式。 有關quirksmode的更多詳細信息: 獲取樣式

這裡有一個簡單的函數來獲取元素中使用的字體:

/**
 * 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;
}

然後,如果安裝了它,它應該返回helvetica,如果不是,則是arial,最後是系統默認的sans-serif字體的名稱。 請注意,CSS聲明中的字體排序很重要。

一個有趣的黑客你也可以嘗試創建大量不同字體的隱藏元素,以嘗試檢測機器上安裝的字體。 我相信有人可以用這種技術製作一個漂亮的字體統計收集頁面。


簡化形式是:

function getFont() {
    return document.getElementById('header').style.font;
}

如果你需要更完整的東西,請檢查一下。





fonts