.woff web版本最佳字体格式 是TrueType/OpenType的压缩格式 兼容性IE9+ 但是不能兼容手机端！
.eot IE专用字体格式
.svg svg字体格式 IE和火狐都不兼容
自定义字体通用模板
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face{
font-family:"myFont";
src:url('font/myFont.eot'),/*兼容IE9+*/
url('font/myFont.eot?#iefix') format('embedded-opentype'),/*兼容IE6-8*/
url('font/myFont.ttf') format('truetype'),/*兼容手机端*/
url('font/myFont.woff') format('woff'),/*兼容所有浏览器*/
url('font/myFont.svg#myFont') format('svg');/*针对ios开发*/ }
p{font-family: 'myFont';} </style> </head> <body> <p>这是我的自定义字体呀~</p> </body></html>
获取特殊字体的网站：https://www.fontsquirrel.com/tools/webfont-generator
由于是国外服务器，因此下载速度比较慢
注意：经我个人发现，这个软件转换出来的字体格式，都只支持英文版
建议还是使用其他国内的在线转换工具或者网址
字体文件
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: '杨任东竹石体';
src:url('myfont/杨任东竹石体.eot'),/*兼容IE9+*/
url('myfont/杨任东竹石体.eot?#iefix') format('embedded-opentype'),/*兼容IE6-8*/
url('myfont/杨任东竹石体.ttf') format('truetype'),/*兼容手机端*/
url('myfont/杨任东竹石体.woff') format('woff'),/*兼容所有浏览器*/
url('myfont/杨任东竹石体.svg#杨任东竹石体') format('svg');/*针对ios开发*/
}
p{font-family: '杨任东竹石体';font-size:24px;}
</style>
</head>
<body> <p>HELLO THIS IS MY FONT~这是我的自定义字体~</p>
</body>
</html>
成功~~~
总结
以上所述是小编给大家介绍的CSS3中新增的对文本和字体的设置，希望对大家有所帮助！
