web -前端历程

前端历程 1：对于前端中自定义字体的兴趣

http://www.w3cplus.com/content/css3-font-face

今天突发奇想，为什么不能自定义自己的字体（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这个网址上生成对应的文件然后导入到你的项目中就大功告成了