您尚未登录。

#1 2016-04-05 20:48:49

zlsun
会员
注册时间: 2016-01-19
帖子: 3

一个奇怪的字体问题

我使用 Chrome 访问 https://zb.oschina.net/ 会出现这样的情况:

2fSQgGt.png?1

中间的“中”字变成了宋体。在其它网站没这个问题。

那段文字的 CSS 是这样的:

body {
    font: 400 16px/1.618 PingHei,'Microsoft Yahei','Noto Sans CJK SC',sans-serif,Emoji,'Segoe UI Symbol';
}

把其中的 Emoji 删掉就变正常了:

lcM00pX.png

使用 Chrome 的开发者工具查看 Rendered Font:

djFMJn0.png

看样子是“中”字是匹配到了 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)

离线

#2 2016-04-05 21:39:27

依云
会员
所在地: a.k.a. 百合仙子
注册时间: 2011-08-21
帖子: 8,384
个人网站

Re: 一个奇怪的字体问题

看样子是“中”字是匹配到了 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

离线

#3 2016-04-05 21:49:15

zlsun
会员
注册时间: 2016-01-19
帖子: 3

Re: 一个奇怪的字体问题

依云 说:

看样子是“中”字是匹配到了 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。

离线

#4 2016-04-06 00:35:29

alanfly
会员
注册时间: 2011-12-16
帖子: 50

Re: 一个奇怪的字体问题

chrome不会遵循fontconfig配置,我这里firefox正常,Symbola字体我也有安装。

离线

#5 2016-04-06 13:02:28

zlsun
会员
注册时间: 2016-01-19
帖子: 3

Re: 一个奇怪的字体问题

alanfly 说:

chrome不会遵循fontconfig配置,我这里firefox正常,Symbola字体我也有安装。

那请问为什么去掉Emoji就正常了?

离线

#6 2016-04-06 15:05:42

alanfly
会员
注册时间: 2011-12-16
帖子: 50

Re: 一个奇怪的字体问题

zlsun 说:
alanfly 说:

chrome不会遵循fontconfig配置,我这里firefox正常,Symbola字体我也有安装。

那请问为什么去掉Emoji就正常了?

不知道,按理说是不影响的,应该去chrome那问问。

离线

页脚