网页开发中如何选取合适且统一的字体

leixue 设计开发 2019-06-20 16:44:11 阅读(...) 评论(11)

在泪雪网移动端的开发中我发现之前网页兼容性确实做得不是特别友好,其主要原因是由于子凡我没有 iOS 设备,每次都是以安装开发以及 Chrome 内核为标准,最终的结果就会导致一些不兼容,由于之前还遇到过字体的显示问题,所以今天子凡就来给大家分享一下如何选给网页选择合适且统一的字体。

font-family

首先我们网页上要想统一字体其实有两种方法,一种是选择大家操作系统上都有的默认字体,第二种就是强行在网页总载入字体文件来实现,但是子凡非常非常不推荐这样的方式,这样对页面的加载造成了负担,并且没有必要刻意的用特殊字体。

根据不同的操作系统推荐对应使用以下的字体:(系统:英文常用字体;中文常用字体)

  • Windows:Tahoma 和 Arial;微软雅黑(Microsoft yahei);
  • Mac OS 和 IOS:Helvetica;华文细黑(STXihei)、冬青黑体(Hiragino Sans GB)和苹方(PingFang SC);
  • Android:Droid Sans;Droid Sans Fallback;
  • Linux:Tahoma 和 Arial;文泉驿微米黑;

那么根据 css 的写法,要想统一字体并且兼容所有的不同设备,最简单的方法就是将所有的字体都包含进去,一下就是子凡整理的适合各个平台系统的 font-family 设置:

1
2
//适合各个平台的 font-family 设置
body{font-family:Helvetica,Tahoma, Arial,"PingFang SC",STXihei,"Microsoft yahei","WenQuanYi Micro Hei",sans-serif;}

仅供搭建参考,以上的设置是针对 body 整个主体的,如果你需要根据页面不同布局而设置不同的字体就需要单独根据元素指定即可,不过子凡认为还是应该尽可能的保持一致为最佳,至少对于在网站文章内容中,应该绝对的统一字体和格式,别弄得像许多微信公众号的那种花样编辑。

对于网站内容,特别是文章中,应该做到统一的字号、颜色、位置,当然对于小标题可以加粗或者稍微特殊样式标明,但是也不应该过于花哨了。

好啦,以上就是子凡认为在网页开发中选取合适且统一的字体的一些看法观点以及实现方法,也是子凡认为一个优秀网站应该具备的良好用户体验的标准,不接受反驳,哈哈哈,欢迎评论讨论还是可以的哈。

除非注明,否则均为泪雪博客原创文章,禁止任何形式转载

本文链接:https://zhangzifan.com/web-font-family-setting.html

发表评论

登录 后参与评论
  1. 华年轻度
    1楼
    华年轻度 4个月前 (06-24)

    确实,Windows还是比较习惯微软雅黑,其他就没在意了

    • 张子凡
      张子凡 4个月前 (06-24)
      回复 @华年轻度 :像我至今还没有正儿八经的用过MacOS的人表示落后了
  2. 大事记
    2楼
    大事记 4个月前 (06-23)

    注重每个小细节的把控,网站用户体验不好才怪,哈哈哈。测兼容性好像有很多平台哈.

  3. 上科互联商学院
    3楼
    上科互联商学院 4个月前 (06-23)

    字体确实非常重要,核心要点是,看着舒服,排版有序。

  4. 青山
    4楼
    青山 4个月前 (06-21)

    哪个看着舒服清晰就用哪个嘿嘿

  5. 奶爸de笔记
    5楼
    奶爸de笔记 4个月前 (06-20)

    我就喜欢用微软雅黑

    • 张子凡
      张子凡 4个月前 (06-24)
      回复 @奶爸de笔记 :主要是这个字体看着还算毕竟舒服,但是做开发还是要考虑非Windows系统
  6. 明月登楼
    6楼
    明月登楼 4个月前 (06-20)

    这个不错,赞一个!