[关闭]
@cherishpeace 2015-03-23T02:30:04.000000Z 字数 1094 阅读 14226

webfont前端使用帮助

本文简要介绍下webfont的使用方式。

第一步:使用font-face声明字体

  1. @font-face {font-family: 'webfont';
  2. src: url('webfont.eot'); /* IE9*/
  3. src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  4. url('webfont.woff') format('woff'), /* chrome、firefox */
  5. url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  6. url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
  7. }

可以在平台上直接获取到cdn地址替换。由于cdn地址以//开头,因此使用cdn地址时,请确保demo页在某个服务里面。直接本地以file形式打开是无法访问//开头的cdn的,如确有必要请加上http。

第二步:定义使用webfont的样式

  1. .web-font{
  2. font-family:"webfont" !important;
  3. font-size:16px;font-style:normal;
  4. -webkit-font-smoothing: antialiased;
  5. -webkit-text-stroke-width: 0.2px;
  6. -moz-osx-font-smoothing: grayscale;
  7. }

第三步:为文字加上对应的样式

  1. <i class="web-font">你要输入的文字</i>

Q&A

1.使用webfont可以跨平台吗?支持低版本浏览器吗?

答:webfont可以支持所有的浏览器,包括ie6。

2.为什么有的时候字体出不来?

答:首先确认,字体是否已经加载了。另外,注意命名空间不要重复。系统生成的fontfamily都是统一的webfont。如果同时引入两份以上的字体,请注意修改为不同的名字,相对应的class名称也要不同。

3.cdn里面的字体地址为什么是//开头的。

答:这是因为如果地址是//开头,浏览器加载就会以当前的http前缀为基准。换句话说如果当前网页是http的,字体就会以http加载,当前网页是https的,字体就会以https加载。这主要是为了适配https的网页。不过需要注意的是,这种用法本地是不行的,换句话说如果下载好我们的demo直接修改成cdn的地址由于是本地的,所以不会自动加前缀。请将demo放到某个服务里再访问。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注