网站建设资讯

webfont前端使用说明_重庆网站建设_网页设计开发_重庆网络推广【狐灵网络科技】

网站建设 2019-07-12 10:18 | 阅读:

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