如何獲得可用的字體重量？

Question

有沒有什麼辦法在JavaScript中獲取特定字體的權重列表？

我想在Photoshop中構建選擇器。

Answer 1

我不清楚你的最終目標，但是....

如果您正在使用像你應該已經知道了所有可能的權重可用谷歌字體。換句話說，如果你提供自己的字體，那麼你就是所有可用字體的主人。

Answer 2

不！一種字體是否實際上是另一種字體的字體權重是Javascript無法解決的深奧知識。你可以定義字體家族使用CSS @font-face規則的什麼樣的font-weights，這種方式說明你不可能實現你所要求的東西。

緊接着，我爲3字體的字體設置了非常標準的@font-face設置。

@font-face { 
    font-family: Barney; 
    src: url(barney_regular.ttf); 
    font-weight: 400; 
} 

@font-face { 
    font-family: Barney; 
    src: url(barney_light.ttf); 
    font-weight: 300; 
} 

@font-face { 
    font-family: Barney; 
    src: url(barney_bold.ttf); 
    font-weight: 500; 
} 

但我們知道，每個那些.ttf文件，代表了不同的權重相同的字體家族是任意的。在這裏我已經指定了它，因爲我知道它。如果自動服務，如字體松鼠，採取這些3個文件，它很可能已經出來了這一點：

@font-face { 
    font-family: barney_regular; 
    src: url(barney_regular.ttf); 
} 

@font-face { 
    font-family: barney_light; 
    src: url(barney_light.ttf); 
} 

@font-face { 
    font-family: barney_bold; 
    src: url(barney_bold.ttf); 
} 

在這裏，這3個權實際上都被指定爲不同的字體系列，這顯然是一個錯誤。但在理論上我可以做愚蠢的東西：

@font-face { 
    font-family: barney; 
    src: url(barney_regular.ttf); 
    font-weight: 500; 
} 

@font-face { 
    font-family: barney; 
    src: url(barney_regular.ttf); 
    font-weight: 400; 
} 

@font-face { 
    font-family: barney; 
    src: url(barney_regular.ttf); 
    font-weight: 300; 
} 

以上，完全相同的字樣被分配到3個不同的權重。所以即使Javascript可以檢測到@font-face聲明中的關係，比如什麼文件與什麼重量相關聯，風格&家族;指定了多少權重......它仍不能告訴你這些資源是否存在，是否已被下載，準確地表示相同字體的不同寬度。

網頁排版在過去的10年裏發生了很大的變化，但它仍然（相對而言）是一種垃圾媒體的類型設置。