html 字体设置 （web端字体设置）

windows自带的字体是有版权的，包括微软雅黑（方正）、宋体（中易）、黑体（中易）等
版权算是个大坑，所谓为了避免版权问题，全部使用开源字体即可
我这里选择的是思源宋体，有两种加载方式

一、在线调用方式

google在线字体服务是没被屏蔽的，可以用。
但是选取字体的页面是不稳定的访问：google font链接

1.搜索Noto Serif SC

2.获取使用方式

3.

4.浏览器处理

引用处引用

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap" rel="stylesheet">

具体内容处引用

body{
font-family: "Noto Serif SC", serif;
}

二、本地调用方式

1.下载文件到项目目录

比如我放到/modules/font目录下

2.引用字体

html的css sytle中写入

font-family: 'Source Han Sans';
src: url('/modules/font/SourceHanSerifCN-Regular-1.otf') format('opentype');
font-weight: normal;
font-style: normal;

然后再调用，比如body。后面的serif是如果加载失败用默认的字体

body{
font-family: "Source Han Sans", serif;
}

3.加载速度优化

因为一个字体文件10来兆，加载速度慢，可以用cdn加速或者在线加载方式