网页默认字体如何替换成好看的字体

这两天有几个朋友问我博客字体是怎么弄得，怎么才能替换成自己喜欢的字体？

下面我就来说说怎么替换web页面的字体：

1、首先需要找到自己喜欢的字体并下载下来，现在浏览器几乎支持市面上的所有字体格式了比如 ttf、woff、woff2、otf等等等

下载好之后会得到一个字体文件包比如：时尚中黑简体.woff2（我网站部分页面的标题就是用的这个字体）所以那这个举例吧。

css引用字体：

@font-face {
	font-family:"name";
	src:url("/fonts/时尚中黑简体.woff2")
}

 
span{
        font-family:'name';
}

注：font-family 代表这个字体的名字，你可以随便起一个好听又拉风的名字，建议用英文名字！
    src 代表你刚刚下载的字体路径地址，可以是绝对路径可以是相对路径，一般字体文件都大于2M，建议放在一个带宽高的服务器里然后调用。强烈建议用 woff2 格式的字体，兼容性好、文件相对比较小！
    font-family的名字如果是中文请一定用 "" 包裹起来！

了解font-display

font-display 是一个新的CSS属性，最先是在Chrome 49中进行试验，现在在Opera和Opera for Android中也得到了支持。通过使用这个属性，我们可以看到如何通过一行CSS代码来实现之前通过JavaScript脚本才能实现的功能。

我们在 @font-face 指令中使用 font-display 来加载自定义字体。这个属性可以添加以下的值：

auto:默认值。典型的浏览器字体加载的行为会发生，也就是使用自定义字体的文本会先被隐藏，直到字体加载结束才会显示。
swap:后备文本立即显示直到自定义字体加载完成后再使用自定义字体渲染文本。在大多数情况下，这就是我们所追求的效果。之前提及到的JavaScript脚本实现的功能就基本和这个是一致的。
fallback:这个可以说是auto和swap的一种折中方式。需要使用自定义字体渲染的文本会在较短的时间（100ms according to Google ）不可见，如果自定义字体还没有加载结束，那么就先加载无样式的文本。一旦自定义字体加载结束，那么文本就会被正确赋予样式。
optional:效果和fallback几乎一样，都是先在极短的时间内文本不可见，然后再加载无样式的文本。不过optional选项可以让浏览器自由决定是否使用自定义字体，而这个决定很大程度上取决于浏览器的连接速度。如果速度很慢，那你的自定义字体可能就不会被使用。

如果你不知道选择那个作为 font-display 的属性值，你可以选择 swap 。它不仅提供了自定义字体和内容的可访问性之间的最佳平衡，它还提供了和使用JavaScript脚本相同的字体加载行为。如果你在页面上有想要加载的字体，但是最终也可以不加载，这时你就可以考虑使用 fallback 或者 optional 作为 font-display 的值。

写在最后：

如果字体文件大小为0.5-1M，那么服务器带宽就要最低为3-5M才能保证相对流畅加载，如果字体文件大小为1-2M，那么服务器带宽就要最低为5-10M才能保证相对流畅加载，依此类推。

一般.woff2格式的字体都比较小可以优先使用这个类型的，兼容性也好。

这里分享了很多不同风格的字体，大部分字体都有我亲自压缩的版本：字体资源

经过以上步骤就算大功告成了，快去你的小破站看看效果吧！