Question

我第一次使用@font-face字体设置网页版面时，这个问题差点没把我逼疯。并非只有响应式设计才会发生标题模糊，而是所有使用@font-face字体的标题都不能幸免。下图是当时网站设计图的部分截图：

网站制作完成后，相关部分的标签代码如下：

相关的CSS代码如下：

虽然我使用@font-face设定了和设计图中完全一样的字体，但浏览器中标题文字看起来还是有一点模糊：

希望你能看出来We’re Bridestone这几个词和设计图的效果不太一样。此处的文字更粗，因而清晰度下降了。

后来，我发现导致该问题的原因是字体粗细。除非显式声明font-weight属性，否则大多数浏览器都会为标题元素应用标准的font-weight（一般都是700）。因此解决方法就是始终为应用了@font-face字体的标题元素设定font-weight属性。例如在本例中，我将CSS代码修改如下：

这样就会覆盖浏览器默认为标题元素设定的font-weight值，修改后的效果如下图所示，与设计图效果完全一致：

在响应式设计中使用自定义@font-face字体的注意事项

使用@font-face自定义网页字体的方法总的来说不错。唯一需要注意的，是在响应式设计中使用该技术时要考虑到字体文件大小。例如，And the winner isn’t...网站使用了三种自定义字体：Bebas Neue、Bitstream Vera Sans和Collaborate Thin。最坏的情况下，如果设备渲染页面时需要SVG字体格式，那相对于使用标准的网页安全字体如Arial，会增加70KB的额外数据。这几种字体其实相当轻量级——有些字体可能会非常庞大！如果你想保持网站的高性能，那请注意控制自定义字体的文件尺寸。

真正的响应式字体单位还不能广泛使用

当前的CSS3字体模块工作草案中引入了视口相对字体（http://www.w3. org/TR/css3-values/#viewport-relative-lengths）。相对单位vw（视口宽度）、vh（视口高度）和vm（视口最小边长，即vm和vh中较小的一个）在获得浏览器广泛支持之后，能为我们节省大量开发时间。悲哀的是目前除了IE 9之外，其他浏览器都不支持视口相对单位。