移动端页面 CSS 设置字体失效

850 阅读1分钟

一.问题

  设置了宋体(SimSun)pc端查看时没问题,但是移动端不管是ios还是安卓都变成了默认字体。   发现设置的另一个单独设置字体库的字体(思源黑体 Noto Sans SC)可以正常显示,就想是不是移动端浏览器本身并没有内嵌该字体。

二.解决

  1.下载字体文件到本地
    网址:simsun.ttc字体下载-simsun.ttc simsun.ttf下载 原版字体宋体-IT猫扑网 (itmop.com)
  2.项目中引入

//css
@font-face {
   font-family: asdasd; // 为了明确是自己设置的字体生效取得二逼名字
   src: url(simsun.ttf);
}
.aaa{
    font-family: asdasd;
}

三.其他

思源黑体解决

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900" />

常用css字体名称对照

(61条消息) CSS样式字体设置失效,呈现乱码_开心就是最好的博客-CSDN博客

@font-face

  其中有src引入文件的格式,和兼容性写法
(61条消息) @font-face用法超详细讲解_RoddyLD的博客-CSDN博客_@font-face