font-face

昨天要改一个很简单的需求，把网站的标题改下。
修改了html，发现字体很奇怪。
有的是设计师给的，有的不是。

本以为需要切图，查看了源码，发现字体文件只有之前标题的那几个字。
新增的字没有办法应用那个字体。

找设计师要来了他的字体文件，truetype的，解压。
上传到http://transfonter.org。
把自己需要的那几个字，也就是新的标题转为svg,woff,ttf,eot,woff2格式。
替换掉原来的font文件即可。

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

查看为何这段代码生效：
http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/

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