昨天的文章中第一段为斜体,发布后出现了一个诡异的现象。用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里看到正常显示的斜体中文啦!