css中如何引入外部字体

这篇文章主要为大家展示了“css中如何引入外部字体”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中如何引入外部字体”这篇文章吧。

    一、font-family属性的作用与用法？

    1.font-family属性的作用

    font-family属性就是可以用css代码设置页面上文字显示的字体样式，例如：宋体，微软雅黑等等。font-family属性设置不同的字体，可以让页面显示效果更协调美观。

    font-family属性可以定义多个值（字体），用逗号隔开。如果浏览器不支持第一个字体，则会尝试下一个，直到有一个可识别的。浏览器会使用它可识别的第一个值。

    2.font-family属性的用法

    font-family:"设置字体名称";

    例：

    css代码：

    .demo{font-family:"微软雅黑";}

    html代码：

    <divclass="demo">我是一段测试文字</div>

    这样在demo盒子里的所有文字都会以微软雅黑的字体样式显示。

    二、CSS怎么引入外部字体？

    一般浏览器常用的字体包括：宋体、黑体、微软雅黑等几种。因为网页载入选择字体时候是调用访问者系统文字库的文字字体，如果没有找到字体那将显示默认的网页字体。而每个人安装的操作系统默认有这几种字体，所以这些字体又称为安全字体。但为了一些特殊的需要，显示有个性化的、好看的文字样式，我们可以引用一些外部字体。

    CSS引入外部字体的方法（@font-face）：

    1.@font-face标签介绍

    @font-face允许您在网页中使用电脑中没有安装的字体，完全摆脱安全字体的限制。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。

    2.CSS引入外部字体的步骤

    1）在CSS中引入字体并给外部字体自定义一个名称

    @font-face{

    /*font-properties*/

    font-family:用户自定义的字体名称;

    src:url('加载外部字体文件的文件地址'),

    url('加载外部字体文件的文件地址'),

    url('加载外部字体文件的文件地址');/*IE9*/

    }

    font-family定义字体的名字，接下来的src是加载字体文件的位置，之所有有多个url就是因为浏览器兼容问题。

    2）使用刚刚定义的字体

    div{

    font-family:用户自定义的字体名称;

    }

    代码实例：

    @font-face{

    font-family:'YaHeiConsolasHybrid';

    src:url('../fonts/yaheiconsolashybrid.ttf');

    }

    body{

    font-family:'YaHeiConsolasHybrid';

    font-size:16px;

    }

    考虑到不同浏览器字体的格式有差别（兼容浏览器）

    /*字体后缀和浏览器有关，如下所示

    *.TTF或.OTF，适用于Firefox3.5、Safari、Opera

    *.EOT，适用于InternetExplorer4.0+

    *.SVG，适用于Chrome、IPhone

    */

    @font-face{

    font-family:'HansHandItalic';

    src:url('fonts/hanshand-webfont.eot');

    src:url('fonts/hanshand-webfont.eot?#iefix')format('embedded-opentype'),

    url('fonts/hanshand-webfont.woff')format('woff'),

    url('fonts/hanshand-webfont.ttf')format('truetype'),

    url('fonts/hanshand-webfont.svg#webfont34M5alKg')format('svg');

    font-weight:normal;

    font-style:normal;

    }

    3.CSS引入外部字体的好处：

    随着@font-face的不断流行，产生了许多新的字体格式图标集，称为网络字体。这些网络字体较平常的安全字体有以下的优点：

    1）使用的是真正的文本，而不是图片，放大和缩小都不会影响渲染效果，用户体验好；

    2）可以被搜索引擎辨认；

    3）不像图片每次需要重新生成，添加删除更方便。

以上是“css中如何引入外部字体”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！