在浏览器显示中，页面上不同的字体样式，不仅提升了页面的美观度，也提升了用户的浏览交互性。那么这些不同的字体样式是怎么用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代码：
我是一段测试文字
这样在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: 'YaHei Consolas Hybrid';src: url('../fonts/yaheiconsolashybrid.ttf');}body {font-family: 'YaHei Consolas Hybrid';font-size: 16px;}
考虑到不同浏览器字体的格式有差别（兼容浏览器）
/*字体后缀和浏览器有关，如下所示* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera * .EOT，适用于Internet Explorer 4.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怎么引入外部字体？css 字体样式设置的方法（实例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611726.html
微信扫一扫 
支付宝扫一扫 
