下载的字体在浏览器中显示不同

Question

此字体 Glamora 显示时比应有的粗，还有其他奇怪的东西 the font look like this, but is displayed like this

这是该文本的格式

.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; 解决了问题：

这也可能与字体轮廓的方式或字体文件的构建方式有关，或者它不是作为网络字体生成的。

许可证似乎不允许将其转换为网络字体，但可能值得与设计师联系，看看他们是否会为您生成 WOFF 和 WOFF2 文件，或者修改许可证以允许转换格式。也就是说，这可能不会影响问题，这个 CSS 更改确实解决了它。

下载的字体在浏览器中显示不同

Downloaded font is displayed differently in browser

html

css

fonts