在网页中实现炫酷的字体，是每一个前端必备的技能；然而计算机中提供的字体，无论是样式上还是颜色上都不能让我们这些设计爷们满意，所以。为了更好的服务用户给用户更加极致的浏览体验，我们需要利用嵌入字体来实现我们想要的效果！！！
一句话总结--所谓的嵌入字体，就是加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
<!DOCTYPE html> <html > <head> <tiltle></title> <style type="text/css"> /*定义字体*/ @font-face { font-family: myfont; /*定义字体名称为myfont*/ src: url("../font/Horst-Blackletter.ttf");/*路径，下载下来的用相对路径，网络上的用绝对路径*/ } div { font-family:myfont; /*使用自定义的myfont字体作为div元素的字体类型*/ font-size:60px; background-color:#ECE2D6; color:#626C3D; padding:20px; } </style> </head> <body> <div>嵌入字体演示</div> </body> </html>
注意：@font-face嵌入字体最好使用在英文网站，中文站里的字体文件略大，从性能考虑使用不合适。影响网页的加载速度，中文站需要少量的特殊字体建议使用图片代替吧。