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

前端别用苹方的英文字体了…太丑了

  •  
  •   alexkuang ·
    alexkuang0 · 2021-03-04 23:32:45 +08:00 · 3609 次点击
    这是一个创建于 1148 天前的主题,其中的信息可能已经有所发展或是发生改变。

    (本人有点字体强迫症)感觉苹方的英文字体就是对 San Francisco 的拙劣模仿,尤其是粗体做标题时。前端把 San Francisco 字体优先级放在苹方前面就行了。

    很多中文网站都会用苹方作为 macOS 上所有字符的默认字体,给很多人或者公司提过这个建议,能想起来的有:

    1. 语雀(未采纳,未来可能优化): https://www.yuque.com/yuque/topics/19879
    2. wolai (已采纳)
    12 条回复    2021-03-05 12:43:00 +08:00
    ayase252
        1
    ayase252  
       2021-03-04 23:35:17 +08:00 via iPhone
    这个......前端说的不算啊
    alexkuang
        2
    alexkuang  
    OP
       2021-03-04 23:38:23 +08:00
    @ayase252 #1 就是说如果做个人网站也可以采纳这个建议
    alexkuang
        3
    alexkuang  
    OP
       2021-03-04 23:39:26 +08:00
    @ayase252 #1 确实大公司处理这方面的决定要繁琐一些
    renmu123
        4
    renmu123  
       2021-03-05 00:16:15 +08:00 via Android
    苹果公司在其官方网站上放出了 SF 字体的完整版本[4],但是该字体仅限“为苹果 iOS 、macOS 、watchOS 、tvOS 开发和展示应用”用途。from wiki
    有可能会有版权问题
    alexkuang
        5
    alexkuang  
    OP
       2021-03-05 00:20:45 +08:00
    @renmu123 #4 在浏览器里面用,没有任何版权问题,其他操作系统又不会自带 sf
    autoxbc
        6
    autoxbc  
       2021-03-05 01:52:35 +08:00
    与其要求别人,不如自己动手,改出需要的样子
    https://i.loli.net/2019/10/31/xYuwKh8G2IgmAWt.png
    alphatoad
        7
    alphatoad  
       2021-03-05 02:36:43 +08:00
    @renmu123 web 应用也是应用
    lichdkimba
        8
    lichdkimba  
       2021-03-05 07:16:27 +08:00
    对啊 你用插件自己覆盖样式不就行了。。。。
    RobertLyu
        9
    RobertLyu  
       2021-03-05 08:12:26 +08:00 via iPhone
    我写论文通通把中文字体设定为苹方简体,英文全是 Times New Roman 。

    苹方英文字间距太奇怪了,而且整体看起来傻傻的,没有生机。
    gouflv
        10
    gouflv  
       2021-03-05 08:21:53 +08:00 via iPhone
    无所谓,产品经理觉得不丑
    crazytree
        11
    crazytree  
       2021-03-05 09:53:09 +08:00
    作为设计师,特意对比了一下,San 字间距较大,字体宽度较小,排版视觉效果远不如苹方,可能楼主是看代码习惯了。
    要说苹方模仿 San,不如说是模仿 Helvetica Neue
    alexkuang
        12
    alexkuang  
    OP
       2021-03-05 12:43:00 +08:00
    @autoxbc #6
    @lichdkimba #8

    你们怎么会觉得我没自己改呢,我一直自己维护着一个全局样式 reset 的 stylus css 。但我很讨厌这种方式,因为这是治标不治本的、且无法跨平台同步、手机上照样丑。我也没有要求,说了自己的观点和建议而已。这是非常容易解决的一件事,因为通常写样式的都会把 sf 加进去,只不过优先级很低,我希望的是中文字体(任何字符集更大的字体)优先级放在后面

    @crazytree #11

    sf 字间距大字体宽度小?你可能是没分清 SF Display 和 SF Text ?请看下面对比图(全用的浏览器默认样式),苹方字间距更大而视觉效果非常不均(图中划红线的地方可以看出,视觉上苹方的英文间距非常不协调。且不用说苹方提供的最高字重只有 600,SF 字重调到 700 都没有苹方宽)。而且字间距会是问题?改个 letter-spacing 的事而已(但我觉得这点上 sf 默认做得就很好)。我不知道我看代码用的 monospace 字体跟看正常显示的 sans serif 有什么关系,monospace 作为正常显示字体看起来很累,我觉得主因就是 **字体宽度大** 。苹方最明显的 SF 特征之一就是小写字母 a,这点跟 Helvetica 最容易区别开。SF 另外最有辨识度的特征大写 Q 和 R 苹方确实没有,但是小写字母用的比大写多得多。

    CodePen: https://codepen.io/alexkuang0/pen/wvoxmWG

    https://i.loli.net/2021/03/05/KpMxNEmH5hzVksr.png
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5364 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 50ms · UTC 08:27 · PVG 16:27 · LAX 01:27 · JFK 04:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.