@font-size 自定义网页字体
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了@font-size 自定义网页字体相关的知识，希望对你有一定的参考价值。
通常情况下，在实际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.eot‘); /*IE9+*/
src: url(‘../font/fangzheng.woff2‘) format(‘woff2‘),
url(‘../font/fangzheng.ttf‘) format(‘truetype‘),
url(‘../font/fangzheng.eot?#iefix‘) format(‘embedded-opentype‘); /*IE6 - IE8*/
font-weight: normal;
font-style: normal;
}
.modal-content h3{
text-align:center;
font-family:fangzheng;
font-size:30px;
color:#333F55;
}
测试效果：Chrome，Firefox，IE7-IE11均可以实现
这里有一个专门用于@font-size的字体网站 http://www.fontsquirrel.com/fontface/generator
fontsquirrel 网站提供了一个免费的 @font-face Kit Generator工具，可以生成不同的字体格式，并且直接用css和html给出demo。使你可以直接引用到你的网站上。你可以直接使用 fontsquirrel 网站提供 的一些字体，也可以上传你自己的字体还是用。
这里有一篇非常详细的博文，可供学习，同时感谢博主 http://www.w3cplus.com/content/css3-font-face
本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1854181
以上是关于@font-size 自定义网页字体的主要内容，如果未能解决你的问题，请参考以下文章