@font-face 用fontsquirrel把ttf文件获取别的文件格式
@font-face是css3的一个模块,但是@font-face这个功能早在IE4就支持了,他主要是把自己定义的Web字体嵌入到你的网页中,
1 2 3 4 5 6 | @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; } |
兼容浏览器
取值说明
1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;
3、format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;
4、weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。
浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。
为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
1 2 3 4 5 | @font-face { font-family: 'YourWebFontName' ; src: url( 'YourWebFontName.eot?' ) format( 'eot' ); /*IE*/ src:url( 'YourWebFontName.woff' ) format( 'woff' ), url( 'YourWebFontName.ttf' ) format( 'truetype' ); /*non-IE*/ } |
但为了让各多的浏览器支持,你也可以写成:
1 2 3 4 5 6 7 8 | @font-face { font-family: 'YourWebFontName' ; src: url( 'YourWebFontName.eot' ); /* IE9 Compat Modes */ src: url( 'YourWebFontName.eot?#iefix' ) format( 'embedded-opentype' ), /* IE6-IE8 */ url( 'YourWebFontName.woff' ) format( 'woff' ), /* Modern Browsers */ url( 'YourWebFontName.ttf' ) format( 'truetype' ), /* Safari, Android, iOS */ url( 'YourWebFontName.svg#YourWebFontName' ) format( 'svg' ); /* Legacy iOS */ } |
免费的字体下载网站Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,
二、获取@font-face所需字体格式:
fontsquirrel
DEMO:
下载字体
打开
fontsquirrel网站:
获得的文件解压得到:
tip:
1、如果你的项目中是英文网站,而且项目中的Logo,Tags等应用到较多的这种特殊字体效果,我建议你不要使用图片效果,而使用@font-face,但是你是中文网站,我觉得还是使用图片比较合适,因为加载英文字体和图片没有多大区别,但是你加载中文字体,那就不一样了,因为中文字体太大了,这样会影响到项目的某些性能的优化;
2、致命的错误,你在@font-face中定义时,文件路径没有载对;
3、你只定义了@font-face,但并没有应用到你的项目中的DOM元素上;
总结来自:http://www.w3cplus.com/content/css3-font-face
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步