webfont前端使用帮助

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

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

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

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

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

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

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

<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放到某个服务里再访问。


推荐大家使用阿里巴巴webfont字体平台：https://www.iconfont.cn/webfont#!/webfont/index