【发布时间】：2015-05-18 13:06:33
【问题描述】：
我在使用 webfonts 时遇到过几次这个问题。这些数字在某些字体大小中的高度往往不均匀，而在其他字体大小中则更均匀。
在下面的 .gif 中，我在 21-23px 之间切换。
有没有更好的解决方案，然后只是将字体大小向上/向下缩小一个像素？
- 现在我正在使用 Source Sans Pro nut，我之前使用过其他字体。
- 这似乎是跨浏览器问题（至少在 Windows 上）
- 我必须自己托管这个字体，但是当我使用谷歌字体时问题不存在
- 也许这只是我的感觉...但我认为不均匀的 px 大小往往会渲染得更好。
EDIT（我被要求提供一些字体 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;
}【问题讨论】：
-
描述很好，但我们想看看你的 CSS 字体规则。
-
不仅仅是数字。不仅仅是网络字体。 Linux 存储库中的一些正式字体在选定的字体大小上看起来很草率。这是你可以接受的东西，或者你必须选择另一种字体。
-
@MrLister 我担心我会得到这个答案 :) 但是你知道为什么当我从谷歌字体获取字体时没有出现这个问题吗？
-
@LeopoldKristjansson Ehm，Google 字体是 好 字体吗？我真的不知道，对不起。有些字体是由业余爱好者设计的，有些是手动提示的，有些是通过运行自动提示例程的，有些字体是通过从一种格式转换为另一种格式来制作的。有很多不同的因素。
-
现代浏览器注意：SVG 字体不再受支持，而一切都支持 WOFF（查看caniuse.com 哪个浏览器横截面支持哪种技术）。在这些@font-face 规则中，你需要的只是 WOFF 资源，也许 eot，如果你是那种想要在微软不支持的操作系统上继续启用过时浏览器的人甚至支持更长的时间。