html自定义字体,@font-face之解决web页面自定义字体问题

题记

------努力就有收获，人人都能成功。

在前端开发中，也许你有被客户要求用各种不用的字体。但实际开发中，每个浏览器都有自己的安全字体(这个对字体(font-family)的定义就是一个安全字体。每种操作系统都有自己默认安装的字体，浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同，有的甚至名称都不一样，在这种情况下，我们必须定义安全字体，使字体在所有的浏览器中都能够正常显示。)，这也就不能满足多个用户的需求。世上无难事，只怕有心人。css3为我们解决了这个问题，而且兼容性杠杠的，接下来就和我一起见证你想要的各种字体的呈现。

@font-face是css3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？其实这个功能早在IE4就支持了。就像我文章前面呈现图片一样，就是我做的一个字体demo，所以大家完全可以放心使用。

第一步：你需要下载字体，目前@font-face支持包括ttf,woff,eot等格式的字体，大家可以去网上下载，也可以继续往下看，下载我给大家分享的字体包。

第二步：在你的样式文件中引入字体(如下图)。

1表示：你的字体名称(可以随意命名)

2表示：引入的字体地址(可以是本地地址，也可以是线上地址)

3表示：字体是否加粗(可省略)

4表示：字体样式(是否倾斜字体，可省略)

第三步：在你需要引入样式的程序段中引入字体(如下图，我给一个class名为t3的代码引入名字为"Kestoy Selfie"的字体)。

第四步：打开你的页面，欣赏你引入的各种字体。

特别说明：

有些下载的字体可能不支持，所以你可以把下载的字体转换成支持的格式，你可以到https://www.fontke.com/tool/fontface/在线转换字体格式。

有些字体只有对英文才有效果，所以当你发现中文没变化时不要惊讶。

你的支持和鼓励，是我最大的动力。如果感觉是干货，欢迎收藏和分享。

举报/反馈