V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MajestySolor
V2EX  ›  前端开发

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

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

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

    @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;
    }
    DOLLOR
        2
    DOLLOR  
       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 自己的问题
    DOLLOR
        5
    DOLLOR  
       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   ·   实用小工具   ·   1004 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:22 · PVG 05:22 · LAX 13:22 · JFK 16:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.