我使用 Chrome 访问 https://zb.oschina.net/ 会出现这样的情况:
中间的“中”字变成了宋体。在其它网站没这个问题。
那段文字的 CSS 是这样的:
body {
font: 400 16px/1.618 PingHei,'Microsoft Yahei','Noto Sans CJK SC',sans-serif,Emoji,'Segoe UI Symbol';
}
把其中的 Emoji 删掉就变正常了:
使用 Chrome 的开发者工具查看 Rendered Font:
看样子是“中”字是匹配到了 Symbola 上面,最终 fallback 到了宋体。
那么问题来了,为什么只有“中”字没被 sans-serif 匹配到?怎么会匹配到Symbola?
网页的“中”字的 Unicode 编码是 U+4e2d,可以确定这个“中”不是异体字。
下面是我的系统相关配置:
$ uname -a
Linux sky 4.4.5-1-ARCH #1 SMP PREEMPT Thu Mar 10 07:38:19 CET 2016 x86_64 GNU/Linux
$ yaourt -Q fontconfig-ubuntu
archlinuxcn/fontconfig-ubuntu 2.11.1-1
$ yaourt -Q google-chrome
archlinuxcn/google-chrome 49.0.2623.110-1
$ cat ~/.config/fontconfig/fonts.conf
<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
<match target="font">
<edit name="antialias" mode="assign">
<bool>true</bool>
</edit>
<edit name="autohint" mode="assign">
<bool>false</bool>
</edit>
<edit name="hinting" mode="assign">
<bool>true</bool>
</edit>
<edit name="hintstyle" mode="assign">
<const>hintfull</const>
</edit>
<edit name="lcdfilter" mode="assign">
<const>lcdlight</const>
</edit>
<edit name="rgba" mode="assign">
<const>rgb</const>
</edit>
</match>
<alias>
<family>serif</family>
<prefer>
<family>Droid Serif</family>
<family>WenQuanYi Micro Hei</family>
</prefer>
</alias>
<alias>
<family>sans-serif</family>
<prefer>
<family>Droid Sans</family>
<family>WenQuanYi Micro Hei</family>
</prefer>
</alias>
<alias>
<family>monospace</family>
<prefer>
<family>Source Code Pro</family>
<family>WenQuanYi Micro Hei Mono</family>
</prefer>
</alias>
</fontconfig>
$ fc-match -a Emoji | head
DroidSans.ttf: "Droid Sans" "Regular"
DroidSans-Bold.ttf: "Droid Sans" "Bold"
wqy-microhei.ttc: "WenQuanYi Micro Hei" "Regular"
DejaVuSans.ttf: "DejaVu Sans" "Book"
DejaVuSansCondensed.ttf: "DejaVu Sans" "Condensed"
DejaVuSans-ExtraLight.ttf: "DejaVu Sans" "ExtraLight"
DejaVuSans-Bold.ttf: "DejaVu Sans" "Bold"
DejaVuSansCondensed-Bold.ttf: "DejaVu Sans" "Condensed Bold"
DejaVuSans-Oblique.ttf: "DejaVu Sans" "Oblique"
DejaVuSansCondensed-Oblique.ttf: "DejaVu Sans" "Condensed Oblique"
$ fc-match -a Symbola | head
Symbola.ttf: "Symbola" "Regular"
DroidSans.ttf: "Droid Sans" "Regular"
DroidSans-Bold.ttf: "Droid Sans" "Bold"
wqy-microhei.ttc: "WenQuanYi Micro Hei" "Regular"
DejaVuSans.ttf: "DejaVu Sans" "Book"
DejaVuSansCondensed.ttf: "DejaVu Sans" "Condensed"
DejaVuSans-ExtraLight.ttf: "DejaVu Sans" "ExtraLight"
DejaVuSans-Bold.ttf: "DejaVu Sans" "Bold"
DejaVuSansCondensed-Bold.ttf: "DejaVu Sans" "Condensed Bold"
DejaVuSans-Oblique.ttf: "DejaVu Sans" "Oblique"
最近编辑记录 zlsun (2016-04-05 20:58:46)
离线
看样子是“中”字是匹配到了 Symbola 上面,最终 fallback 到了宋体。
rendered font 应该显示的是实际使用的字体才对吧。你看:
>>> import fontconfig
>>> f = fontconfig.FcFont('/usr/share/fonts/TTF/Symbola.ttf')
>>> f.has_char('中')
True
>>> f.has_char('开')
False
>>> f.has_char('众')
False
离线
看样子是“中”字是匹配到了 Symbola 上面,最终 fallback 到了宋体。
rendered font 应该显示的是实际使用的字体才对吧。你看:
>>> import fontconfig >>> f = fontconfig.FcFont('/usr/share/fonts/TTF/Symbola.ttf') >>> f.has_char('中') True >>> f.has_char('开') False >>> f.has_char('众') False
好吧,这个是我弄错了,我没想到Symbola这个字体会内置中文,我一直把它当成英文字体。
但是为什么会使用Symbola呢?按我的理解,“中”字应该会被 sans-serif 匹配,然后按照fontconfig的配置匹配到 WenQuanYi Micro Hei。
离线
chrome不会遵循fontconfig配置,我这里firefox正常,Symbola字体我也有安装。
离线
chrome不会遵循fontconfig配置,我这里firefox正常,Symbola字体我也有安装。
那请问为什么去掉Emoji就正常了?
离线
alanfly 说:chrome不会遵循fontconfig配置,我这里firefox正常,Symbola字体我也有安装。
那请问为什么去掉Emoji就正常了?
不知道,按理说是不影响的,应该去chrome那问问。
离线