用 @font-face 来替换网页字体为啥无效呢,有木有大佬知道? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MajestySolor
V2EX    前端开发

用 @font-face 来替换网页字体为啥无效呢,有木有大佬知道?

  •  
  •   MajestySolor 2020-04-04 21:38:27 +08:00 4038 次点击
    这是一个创建于 2093 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这样写为啥无效呢,有大佬知道嘛

    @font-face { font-family: "宋体"; src: local("Source Han Sans SC"); } 
    20 条回复    2020-06-29 15:07:32 +08:00
    1KN6sAqR0a57no6s
        1
    1KN6sAqR0a57no6s  
       2020-04-04 22:13:47 +08:00 via Android
    src: local("Source Han Sans SC"); 的意思是加载用户电脑中安装好的 Source Han Sans SC,如果没装的话就不会生效。

    还有 font-family: "宋体"; 这边写"宋体"会不会不太合适,因为大家都已经有了宋体,不知道重复定义会发生什么。换成"Siyuan"之类的会好一些。

    正确的引入和使用方式大概是这样:
    @font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff2') format('woff2'),
    url('myfont.woff') format('woff');
    }

    body {
    font-family: 'MyWebFont', sans-serif;
    }
    AV1
        2
    AV1  
       2020-04-04 22:25:16 +08:00
    多写几个别称,有的浏览器可能不认 Source Han Sans CN

    @font-face{
    font-family: "宋体";
    src: local("Source Han Sans CN"),local("Source Han Sans CN Regular");
    }

    另外有的网站会指定雅黑,你可能需要把雅黑也覆盖掉
    @font-face{
    font-family: "microsoft yahei";
    src: local("Source Han Sans CN"),local("Source Han Sans CN Regular");
    }
    1KN6sAqR0a57no6s
        3
    1KN6sAqR0a57no6s  
       2020-04-04 22:25:27 +08:00 via Android
    噢,我知道你要干什么了,当我没说。(狗头)
    MajestySolor
        4
    MajestySolor  
    OP
       2020-04-04 22:29:41 +08:00
    @YuxiangLuo #1 感谢回复,你理解错了,我是想替换网页的字体
    @DOLLOR #2 不是字体名的问题,而是这样写无效,但是我记得以前我在 firefox 上也这样干过是有效的,不知道是不是 chromium 自己的问题
    AV1
        5
    AV1  
       2020-04-04 22:33:04 +08:00
    @MajestySolor
    你一说我也发现了,chromium 家族的浏览器通过 @font-face 来替换字体,有一定概率会失效,得直接*{font-family: 字体名称了;}。
    noe132
        6
    noe132  
       2020-04-04 23:31:06 +08:00 via Android
    提一点,宋体不一定是宋体,有可能是 simsun nsimsun,serif 。你看看实际渲染的字体究竟是哪个。
    mxalbert1996
        7
    mxalbert1996  
       2020-04-05 01:50:57 +08:00
    MajestySolor
        8
    MajestySolor  
    OP
       2020-04-05 21:19:43 +08:00
    @mxalbert1996 #7 你是用什么浏览器有效?我这里 chromium 内核的都无效。
    MajestySolor
        9
    MajestySolor  
    OP
       2020-04-05 21:51:56 +08:00
    https://codepen.io/Naushika/pen/ExjBwEy
    各位可以测试一下,chromium 确实无效,好奇怪
    mxalbert1996
        10
    mxalbert1996  
       2020-04-05 21:55:09 +08:00 via Android
    @MajestySolor 这个 Dev Tools 看不出来是 Chrome 吗?我这样替换字体都用了多少年了。
    mxalbert1996
        11
    mxalbert1996  
       2020-04-05 22:16:25 +08:00
    顺便你那个链接我这里也没问题。

    我建议你检查一下是不是你已经用了替换字体类的扩展导致冲突了。
    MajestySolor
        12
    MajestySolor  
    OP
       2020-04-05 22:58:15 +08:00
    @mxalbert1996 #10 我表达错误,chrome 是正常的,只有 chromium 的 edge 无效
    mxalbert1996
        13
    mxalbert1996  
       2020-04-06 08:35:43 +08:00
    @MajestySolor 我这里 Edge 也没问题。
    JamesR
        14
    JamesR  
       2020-06-02 13:51:59 +08:00
    我也碰到这个问题了,捣鼓了一早上,谷歌浏览器本身问题,不识别你安装的字体,换别的浏览器(要清空缓存)正常。
    TPOB
        15
    TPOB  
       2020-06-07 16:39:53 +08:00
    我也遇到这个问题了...可是我不想换浏览器(
    TPOB
        16
    TPOB  
       2020-06-07 22:27:35 +08:00
    https://github.com/be5invis/Sarasa-Gothic/issues/115 我怀疑是这个问题,我用等线和雅黑都可以替换 @MajestySolor
    MajestySolor
        17
    MajestySolor  
    OP
       2020-06-07 22:38:51 +08:00
    @TPOB #16 chromium edge 替换任何字体都无效,显然是浏览器自己的问题,同样的设置 Firefox 就一切正常
    TPOB
        18
    TPOB  
       2020-06-08 09:50:05 +08:00
    @MajestySolor 我就是 chromium edge 呀,我换等线,雅黑,方正姚体,仿宋都可以,似乎是比较老的字体都行,新的都不行。可是我还是比较想用 sarasa 。。。
    moliyumi
        19
    moliyumi  
       2020-06-29 13:34:41 +08:00   1
    我也遇见这个问题了,解决方法:

    进 chrome://flags/ 搜 font, 把( Match @font-face { src: local(<name>) } names by PostScript and full font name )这个 disabled 掉

    我不知道这么做会不会有安全风险,请慎重
    MajestySolor
        20
    MajestySolor  
    OP
       2020-06-29 15:07:32 +08:00
    @moliyumi #19 厉害了大佬,终于解决办法了 大拇指
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2864 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 25ms UTC 12:22 PVG 20:22 LAX 04:22 JFK 07:22
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86