Question

我曾经多次使用webfonts这个问题。在某些字体大小中，数字往往具有不均匀的高度，而在其他字体中则更均匀。

在下面的.gif文件中，我在21-23px之间切换。

Switching between 21px and 23px font size

是否有一个更好的解决方案，然后只是在px中上下缩进字体大小？

现在我正在使用Source Sans Pro nut我以前使用过其他字体。
这似乎是一个跨浏览器问题（至少在Windows上）
我必须自己托管这种字体，但是当我使用谷歌字体
也许这只是我的感觉......但我认为不均匀的px尺寸往往会变得更好。

编辑（我被要求提供一些字体css）：

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/sourcesanspro/sourcesanspro-bold-webfont.eot');
    src: url('../fonts/sourcesanspro/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcesanspro/sourcesanspro-bold-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro/sourcesanspro-bold-webfont.woff') format('woff'),
         url('../fonts/sourcesanspro/sourcesanspro-bold-webfont.ttf') format('truetype'),
         url('../fonts/sourcesanspro/sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg');
    font-style: normal;
    font-weight: 700;

}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/sourcesanspro/sourcesanspro-italic-webfont.eot');
    src: url('../fonts/sourcesanspro/sourcesanspro-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcesanspro/sourcesanspro-italic-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro/sourcesanspro-italic-webfont.woff') format('woff'),
         url('../fonts/sourcesanspro/sourcesanspro-italic-webfont.ttf') format('truetype'),
         url('../fonts/sourcesanspro/sourcesanspro-italic-webfont.svg#source_sans_proitalic') format('svg');
  font-style: italic;
  font-weight: 400;

}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/sourcesanspro/sourcesanspro-regular-webfont.eot');
    src: url('../fonts/sourcesanspro/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcesanspro/sourcesanspro-regular-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro/sourcesanspro-regular-webfont.woff') format('woff'),
         url('../fonts/sourcesanspro/sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('../fonts/sourcesanspro/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
  font-style: normal;
  font-weight: 400;

}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/sourcesanspro/sourcesanspro-semibold-webfont.eot');
    src: url('../fonts/sourcesanspro/sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcesanspro/sourcesanspro-semibold-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro/sourcesanspro-semibold-webfont.woff') format('woff'),
         url('../fonts/sourcesanspro/sourcesanspro-semibold-webfont.ttf') format('truetype'),
         url('../fonts/sourcesanspro/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold') format('svg');
  font-style: normal;
  font-weight: 600;

}

Answer 1

您用什么来生成您的WOFF文件？因为如果我使用.otf Source Sans Pro，使用FontCreator将其转换为WOFF，并使用最简单的CSS加载它：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Source Sans Pro WOFF test</title>
    <style>
      @font-face {
        font-family: ssp;
        src: url('SourceSansPro-Regular.woff');
      }
      body {
        font-family: ssp;
      }
    </style>
  </head>
  <body>
    <p style="font-size: 20px">0123456789</p>
    <p style="font-size: 21px">0123456789</p>
    <p style="font-size: 22px">0123456789</p>
    <p style="font-size: 23px">0123456789</p>
    <p style="font-size: 24px">0123456789</p>
    <p style="font-size: 25px">0123456789</p>
    <p style="font-size: 26px">0123456789</p>
  </body>
</html>

然后我得到以下结果：

enter image description here

所有这些看起来与它在桌面出版软件中的作用完全一致，所以它看起来非常像你的“webfont”版本已被用于转换字体用于网络目的的任何软件破坏。

即使我使用Google托管的Source Sans Pro版本，看起来也不错：http://jsbin.com/vajoxesudo/1/edit?html,output

某些字体大小的数字不均匀

1 个答案: