下載的字體在瀏覽器中的顯示方式不同

Question

這種字體 Glamora 顯示得比它應該的要厚，還有其他奇怪的東西，字體看起來像這樣，但顯示是這樣的

這是該文本的格式

 .brand h1{ color: #FEF2DB; font-family: Glamora; font-size: 230px; line-height: 68.1%; text-align: center; letter-spacing: 0.095em; }

Answer 1

這種字體可能只有一個權重，即。 沒有粗體版本或其他變體的單一樣式。

默認情況下， h1和所有其他標題都設置為粗體，因此您可能會得到一些由瀏覽器創建的虛假粗體。

嘗試添加：

.brand h1 {
  font-family: Glamora;
  /* Etc. */

  font-weight: normal;
}

我能夠重現您的問題，並添加font-weight: normal; 解決它：

這也可能與字體輪廓或字體文件的構建方式有關，或者它尚未作為 web 字體生成。

許可證似乎不允許將其轉換為 web 字體，但可能值得與設計師聯系，看看他們是否會為您生成 WOFF 和 WOFF2 文件，或者修改許可證以允許轉換格式。 也就是說，這可能不會影響問題，而這個 CSS 更改確實解決了它。