css怎么引入外部字体?

2024-01-18 10:47 小编
一、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)可以被搜索引擎辨认;


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码