React和vue等前端html页面引入自定义字体文件，更改页面字体样式

font-family中列出的是几乎适用于所有计算机的网络安全字体，如：Arial/Helvetica/Georgia/Times New Roman等。但是如果想要一些特别的字体，可以从外部网站中找到并下载，然后在代码中引入。网页自带的字体没有很多，有时候想使用我们自己的字体文件去修改网页字体效果，就可以使用这种方法。需要提前准备自己的字体文件。

以下是一些获取字体的网站：

1. fontsquirrel.com
2. fonts.com
3. my fonts.com

首先需要在网站上挑选合适的字体并下载到本地，这里我选用了一种很火的免费字体：opensans，在fontsquirrel.com中找到并下载。

将下载好的otf或者WOFF和WOFF2格式的字体文件导入项目中，并打开附带的stylesheet.css，这里定义了注册字体文件的规则。将这个文件中的内容复制到项目css文件的顶部（放顶部是因为先注册才能使用字体）并将URL改成字体文件的相对路径。

@font-face {
    font-family: Hado;
    src: url('../assets//my.otf');
    font-weight: normal;
    font-style: normal;
}
 
/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Hado;
}

然后将这个css文件引入到html页面中就可以了：这是引入后的效果