帮帮我,标题模糊怎么办

发布日期:2015-08-25 17:55:08

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

网站制作完成后,相关部分的标签代码如下:
<div class="intro">
<h1>We're Bridestone: <span>providing <b>beautiful</b> quality
<i>natural</i> stone products.</span></h1>
…more code…
</div> <!-- intro:END -->
相关的 CSS代码如下:
.intro h1 {
font-family: CaudexBold, "Times New Roman", Times, serif;
font-size: 2.63636364em;
line-height: 1em;
}
.intro h1 span {
font-size: 0.545454545em;
font-family: CaudexRegular, "Times New Roman", Times, serif;
font-weight: normal;
}
虽然我使用 @font-face 设定了和设计图中完全一样的字体,但浏览器中标题文字看起
来还是有一点模糊:
希望你能看出来 We’re Bridestone这几个词和设计图的效果不太一样。此处的文字更粗,
因而清晰度下降了。
后来,我发现导致该问题的原因是字体粗细。除非显式声明 font-weight 属性,否则大
多数浏览器都会为标题元素应用标准的 font-weight (一般都是 700) 。 因此解决方法就
是始终为应用了 @font-face 字体的标题元素设定 font-weight 属性。例如在本例中,
我将 CSS代码修改如下:
.productIntro h1 {
font-family: CaudexBold, "Times New Roman", Times, serif;
font-weight: 400;
font-size: 2.63636364em;
line-height: 1em;
}
这样就会覆盖浏览器默认为标题元素设定的 font-weight 值,
在响应式设计中使用自定义@font-face字体的注意事项
使用 @font-face 自定义网页字体的方法总的来说不错。唯一需要注意的,是在响应式
设计中使用该技术时要考虑到字体文件大小。例如,And the winner isn’t...网站使用了三
种自定义字体:Bebas Neue、Bitstream Vera Sans和 Collaborate Thin。最坏的情况下,如
果设备渲染页面时需要 SVG字体格式, 那相对于使用标准的网页安全字体如 Arial, 会增
加 70KB 的额外数据。这几种字体其实相当轻量级——有些字体可能会非常庞大!如果
你想保持网站的高性能,那请注意控制自定义字体的文件尺寸。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计