手机web字体css怎么设置微软雅黑

Posted 2023-04-11

font-family:"微软雅黑"；或者font-family:"Microsoft Yahei";
如果在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误，

为此，在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。

使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

unicode编码的微软雅黑表示如下：
font-family: "\\5FAE\\8F6F\\96C5\\9ED1"

移动端html5手机网站如何定义字体font-family

很多懒友在使用自定义字体时候，很容易像PC端那样定义，其实安卓和ISO系统，对中文字体是不支持，所以定义以后看到效果不是直接定义字体效果，如果需要定义

大家会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载

@font-face

font-family: 'MicrosoftYaHei';

src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */

src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */

url('MicrosoftYaHei.ttf')  format('truetype'), /* Safari, android, ios */

url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */

参考技术A 引入字体，调用微软雅黑，使用@font-face

CSS无需Webfont实现近似「微软雅黑Light」的字体效果

在网页制作中，美观的字体能很大程度上提升一个网页的整体外观浏览效果（说白了就是提升逼格），但受各种因素的影响（例如中文字体应用Webfont的麻 烦），使开发者在制作过程中不得不使用“Web安全字体”，这使网页的外观效果大幅下降。今天在改模板的过程中偶然发现一个很笨的方法，实现近似微软雅黑 Light的字体效果。

实际上「微软雅黑Light」字体就是相对于「微软雅黑」字体较细，但是它的显示效果却要让人觉得舒适很多，只要字体不会太小，显示效果还是不错的。

所以直接用font-weight属性设置字体的粗细度就可以了，目前来看它的值为300时比较近似「微软雅黑Light」。

h1 {

  font-family:  "Microsoft YaHei";  

  font-weight:  300;

}