下载的字体在浏览器中的显示方式有所不同 [英] Downloaded font is displayed differently in browser

问题描述

此字体Glamora显示的字体比其应有的粗字体和其他怪异的东西

这也可能与字体的轮廓概述或字体文件的构建方式有关，或者与它不是作为网络字体产生的事实有关.

许可证似乎不允许将其转换为Web字体，但是可能值得与设计人员联系并查看他们是否会为您生成WOFF和WOFF2文件，或者修改许可证以允许将许可证转换为Web字体.格式.也就是说，这可能不会影响该问题，并且此CSS更改确实可以解决该问题.

This font Glamora is displayed with more thick than it should be and other weird things the font look like this, but is displayed like this

this is the formatting for that text

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

解决方案

There’s probably only one weight of this font, ie. a single style with no bold version or other variants.

By default, h1 and all other headings are set to be bold, so you are probably getting some faux bolding, created by the browser.

Try adding:

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

  font-weight: normal;
}

I was able to reproduce your issue, and adding font-weight: normal; fixed it:

This might also have something to do with how the font outlines or how the font file was built, or the fact that it hasn’t been produced as a web font.

The license doesn’t appear to allow converting it into a web font, but it might be worth getting in touch with the designer and seeing if they would produce WOFF and WOFF2 files for you, or modify the license to allow converting the format. That said, that might not impact the issue, and this CSS change does fix it.

这篇关于下载的字体在浏览器中的显示方式有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！