移动端的页面如何引入自定义字体？

Question

客户明确要求使用他们的字体

这是设计给我发的3种字体文件，我该如何把它引入到移动端项目中呢？
我原来用的字体图标格式是是这样

@font-face {font-family: 'iconfontyyy';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfontyyy') format('svg');
}

只有ttf文件可以吗，我没有这么做过，请各位指点指点...

Answer 1

看注释

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

所以移动端 *.ttf 就可以了

Answer 2

是这样使用的，具体浏览器对字体格式的支持可以去这看看
http://www.w3schools.com/cssr...

Answer 3

然后给需要的元素设置font-family,理论上会给出woff,ttf,svg,eot四种。