css中适合各个平台的字体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 设置:

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

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

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