所以我有时想像这样强调某些词:
<h1>I want to <span class="emphasis">emphasize</span> some text.</h1>
同时,我想为h1文本使用自定义字体:
@font-face
{
font-family: 'MuseoSlab';
src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot');
src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot?#iefix') format("embedded-opentype"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format("svg"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.woff') format("woff"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.ttf') format("truetype");
font-weight: normal;
font-style: normal;
}
问题是,Windows 中的 Chrome 与跨度文本重叠:
Firefox 和 IE 似乎无法流畅地呈现字体:
Opera 似乎按照我想要的方式呈现它:
谁能告诉我这是怎么回事,我该如何解决这些问题?
编辑:
有时我在 Chrome 中遇到了那个令人震惊的问题;有时我不这样做。我也安装了最新的 Chrome:
最佳答案
Firefox 和 IE 以这种方式显示字体的原因是 h1
元素默认具有 font-weight: bold
,并且您将字体声明为正常
体重。该浏览器所做的可以说是正确的做法:由于没有粗体字,它们通过算法将字母加粗。
为避免这种情况,添加 h1 { font-weight: normal; }
。或者,使用字体系列的粗体字样。
您的 Chrome 中奇怪的重叠听起来像是一个特定于安装的问题,因此您应该首先考虑更新或重新安装 Chrome。
关于html - 自定义字体渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15993682/