昨天的文章中第一段为斜体,发布后出现了一个诡异的现象。用Safari浏览,斜体字变得非常小。具体情况如下图所示:
然而,用Chrome浏览就一切正常。之后经过了各种努力,都没有能修复这个问题,心有不甘的我在互联网上拼命搜索,最后在V2EX的一个帖子中找到了答案。
按照网友@notcome的说法,这是Safari 8特有的bug,当中文黑体以「无衬线字体」(sans-serif)的身份被识别,并以网络字体的形式被网页调用时就会出现上述情况。
在苹果发布相关补丁之前,暂时只能将系统自带的「黑体-简」(STHeiti)作为本地字体来调用,以解决上述问题。我们可在CSS文件中修改如下代码:
body {
margin: 0;
padding: 0;
border: none;
background: #f1f1f1;
color: #444;
font-family: 'Source Sans Pro', 'Helvetica Neue',STHeiti, sans-serif;
font-size: 20px;
-webkit-font-smoothing: antialiased;
-ms-word-break: break-word;
word-break: break-word;
}
.post-content blockquote {
font-family: 'Roboto Condensed', 'Source Sans Pro', 'Helvetica Neue', STHeiti, sans-serif; padding: 2% 0 2% 5%;
position: relative;
color: #666;
font-size: inhert;
border-left: 15px solid #FF6558;
font-weight: normal;
}
.post-content cite {
font-family: 'Source Sans Pro', 'Helvetica Neue',STHeiti, sans-serif;
font-weight: bold;
text-transform: uppercase;
line-height: 140%;
font-size: inhert;
}
.post-content cite:before { content: "— "; }
.post-content blockquote cite {
font-family: 'Source Sans Pro', 'Helvetica Neue',STHeiti, sans-serif;
display: block;
margin-top: 1em;
color: #444;
font-size: inhert;
}
.post-content blockquote cite { font-family: 'Source Sans Pro', 'Helvetica Neue',STHeiti, sans-serif; font-style: italic; font-weight: bold; }
.post-content em{font-family: 'Source Sans Pro', 'Helvetica Neue',STHeiti, sans-serif; font-style: italic;}
.post-content strong em,
.post-content em strong {
font-family: 'Source Sans Pro', 'Helvetica Neue',STHeiti, sans-serif;
font-weight: bold;
font-style: italic;
}
由于每个人的HTML标签不尽相同,因此以上代码只是提供一个思路,宗旨是只要涉及「italic」字体的部分,最好都添加一个对font-family
的声明,并将「STHeiti」设置在「sans-serif」之前。
完成了这些工作,我们就能在Safari里看到正常显示的斜体中文啦!