前端历程 1:对于前端中自定义字体的兴趣
今天突发奇想,为什么不能自定义自己的字体(font)呢?天天用那些自定义好的很丑哎~~所以找到一位大神的阐述内容。
大体上来说,@font-face的引用是这个问题的解决入口
1.下载你所感兴趣的字体形式
http://webfonts.fonts.com/
http://typekit.com/
http://kernest.com/
http://kernest.com/licenses
http://www.dafont.com/
http://nicewebtype.com/fonts/
2.接下来就是引用到整体的代码的问题了,,这下就来到了@font-face来了
@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*/
}
这个是@font-face的格式
实例一下吧
@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 */
}
唉,这时候问题来了,这些个文件后缀 .eot .ttf是怎么来的呢??好,刚才我们已经得到字体的文件了,然后上传到http://www.fontsquirrel.com/fontface/generator这个网址上生成对应的文件然后导入到你的项目中就大功告成了