@font-size 自定义网页字体

Posted 2020-08-09

通常情况下，在实际Web页面开发中我们往往只能使用计算机已经安装好的字体比如黑体、宋体、雅黑等等，那如果遇到特殊字体该怎么办呢？有人说用图片替代，这个只能针对特殊场景的局部使用，实乃下下之策。

例如：一个注册页面的“注册会员”几个字

CSS3引入的@font-face 这一属性可以很好的解决这个问题，可以帮助我们非常灵活的使用一些特殊的字体，即使用户电脑里面没有安装这个字体，网页也可以显示。当然，同其他属性一样，IE8及以下浏览器不支持@font-face

基本语法：

@font-face { 
font-family: <family-name>;  <自定义一个字体的名称>
src: url(sansation_light.woff);  <下载好的字体，在电脑中保存的路径>
[ font-variant: <font-variant>; ]
[ font-stretch: <font-stretch>; ] 
[ font-weight: <weight>; ] 
[ font-style: <style>; ]
}
[... : ...] 方括号部分的属性表示可选 

比如：

@font-face{

    font-family:fangzheng;

    src:url(‘../font/fangzheng.ttf‘);

}

.modal-content h3{

    text-align:center;

    font-family:fangzheng;

    font-size:30px;

    color:#EB980E;

}

兼容性问题：

Webkit/Safari(3.2+)：TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)； 
Opera (10+)： TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)； 
Internet Explorer： 自ie4开始，支持EOT格式的字体文件；ie9支持WOFF； 
Firefox(3.5+)： TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6) 
Google Chrome：TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6 
由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持。

这里有一个专门用于@font-size的字体网站  http://www.fontsquirrel.com/fontface/generator 

fontsquirrel 网站提供了一个免费的 @font-face Kit Generator工具，可以生成不同的字体格式，并且直接用css和html给出demo。使你可以直接引用到你的网站上。你可以直接使用 fontsquirrel 网站提供 的一些字体，也可以上传你自己的字体还是用。 

@font-face Kit Generator demo 
http://www.xunzou.com/demo/font-face/Chopin-Script-fontfacekit/demo.html 
@font-face Kit Generator demo 
http://www.font2web.com/ 

@font-face demo 
http://www.xunzou.com/demo/font-face/font-face.html 

更多内容：可以参考 http://www.runoob.com/css3/css3-fonts.html

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1853453