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引入外部字体的方法
当前链接:http://scyanting.com/article/jhipic.html