font-face - Webfont (@font-face) 行高问题

标签 font-face webfonts css

我经常在我开发的网站中嵌入 webfont (@font-face),直到今天我才遇到过重大问题。

其实我觉得line-height有很大的问题,我英文不是特别好所以我尽量用图来说明。我已经联系了 fontshop.com(购买字体的地方)的支持,但他们似乎不理解/解决问题。

我们之前使用标准桌面字体(= 渲染对我们有好处):

我们对 font-face 的看法(CSS 样式表没有变化):

这是 CSS:

#content h1 {
    background:#000000;
    color:#FFFFFF;
    font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
    font-size:35px;
    line-height:30px;
    padding:10px;
    text-transform:uppercase;
}

最佳答案

通常字体网站都会有办法在你下载的时候配置webfont包。我从 myfonts.com 购买所有字体,在高级设置下有行高调整选项。如果此选项可用,请尝试使用 native 行高调整下载字体。如果没有,请尝试将字体上传到 fontsquirrel 的在线字体生成器并上传新版本。

关于font-face - Webfont (@font-face) 行高问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12929684/

相关文章:

css - @font-face 字母间距仅在移动浏览器上看起来更宽

html - 字体不能在线工作

css - Typekit 字体未在 webkit 浏览器中加载

css - 在 Jinja2 模板中使用字体?

javascript - 有没有办法检测用户的浏览器是否支持@font-face?

css - @font-face 不工作

css - 为什么这些字体不能跨服务器加载?

css - Webfonts 和 OpenType 旧式数字 (onum) 功能

javascript - .png 或 .jpg 图像在屏幕上移动,spritesheet,css 关键帧,停止并重复循环

android - 汉堡字形 (☰) 在 Android 设备上呈现灰色