最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】HTML5的web网站中设置字体类型为PingFangSC-Regular和微软雅黑

Web crifan 956浏览 0评论
折腾:
【记录】优化绘本查询系统的UI
期间,看到title标题的字体,标注图中写的是PingFangSC-Regular:
所以需要去找找看,web页面中如何设置,以及是否能显示出效果
html font-family pingfangSC
参考:
在网页上使用苹方字体 – 任平生的学习笔记
去设置:
font-family: PingFangSC-Regular;
如何优雅的选择字体(font-family) – 前端学习 – SegmentFault 思否
加上微软雅黑,则为:
font-family: PingFangSC-Regular, Microsoft Yahei;
此处在Mac中Chrome的效果是:
-》看来PingFangSC-Regular是生效了的
-》比默认的字体的效果好看多了:
-》抽空等上线后,再去看看Window平台中的 微软雅黑 是什么效果。
参考:
在 Web 内容中使用系统字体
看来还有多种写法:
中间是否有空格,以及中间是否有短横线:
PingFang SC Regular
所以再去试试不同的写法的效果
结果:
PingFang SC Regular
PingFang SC-Regular
PingFangSC Regular
都不起效果。
OS X – 新功能 – Apple (中国)
“新的中文系统字体 “苹方” 专为电子显示屏而设计,让简体和繁体中文都格外清晰易读。”
“更多变化
“苹方” 可提供包括超细体和半粗体在内的六种粗细变化。不同的字体粗细,让你在标题、字幕等方面的编排上有了更灵活的选择。”
-》应该就是:
中提到的:“PingFangSC-Ultralight,PingFangSC-Semibold”
html family pingfang sc
在 Web 设计中使用系统 UI 默认字体 | Undercurrent
也还是有带空格的写法,不给是加了引号了:”PingFang SC”,和”Microsoft YaHei UI”
试试:
font-family: "PingFang SC", "Microsoft Yahei";
结果:不生效
【总结】
此处,苹果新出的 “苹方”的字体,是专门针对中文优化后的,效果不错。
具体在HTML中的写法:
据说是可以带空格,比如:
PingFang SC
或:
"
PingFang SC
"
但是此处Mac中Chrome或Safari都不生效。
只有写成无空格,不同变体用短横线:
PingFangSC-Regular
Mac中Chrome或Safari都能生效,效果不错:
Chrome中:
Safari中:
TODO:
后续等上线后,用windows或Android等平台,看看微软雅黑等字体是否生效,效果如何。
【后记】
https://blog.csdn.net/linpenghui958/article/details/77244985
前端项目,引入苹方字体 – linpenghui958的博客 – CSDN博客
其中可以看出,有些地方的
PingFangSC-Regular
实际上底层是定义好的名字,引入的ttf等字体实现的
@font-face{
  font-family: 'pingFangSC-Regular';
  src: url('pingFangRegular.ttf');
  font-weight: normal;
  font-style: normal;
}

不论如何:
web中直接写带空格的:
PingFang SC Regular
此处还是无法直接识别的。

【后记2】
又参考:
如何优雅的选择字体(font-family) – 前端学习 – SegmentFault 思否
加了些备用字体,最终写成:
font-family: "PingFangSC-Regular", "苹方", "Microsoft Yahei", "微软雅黑", "Heiti SC";
防止前面的字体没有,最后用 黑体:
font-family: "Heiti SC";
 效果也是不错的,接近我们要的效果的:

转载请注明:在路上 » 【已解决】HTML5的web网站中设置字体类型为PingFangSC-Regular和微软雅黑

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
85 queries in 0.140 seconds, using 20.70MB memory