css如何引入外部字体

在做项目的时候发现一个问题，css引入ttf文件不生效。明明引用路径跟写法都正确，但是渲染出来的依然是默认字体，这是为什么呢？

1、引用方式：

@font-face{
    font-family: 'HYk2gj';
    src : url('../fonts/HYk2gj.ttf');
}
div{
    font-family: 'HYk2gj';
}

2、写法是没有错的，但就是不生效，所以我分析了一下，总结了以下可能的问题：

（1）字体格式需要兼容，不同浏览器字体的格式有差别（兼容浏览器）

（2）字体文件太大造成字体还没加载完，样式已经渲染完了

3、所以，如果设计只给.ttf一种格式的字体，那我们怎么办呢？我们可以去 transfonter.org/ 将 ttf字体库文件转换成base64 的css文件，然后引入兼容各种浏览器的字体文件，就完美解决了。

@font-face {
  font-family: 'HYk2gj';
  src: url('fonts/HYk2gj.eot'); /* IE9 Compat Modes */
  src: url('fonts/HYk2gj.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/HYk2gj.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/HYk2gj.woff') format('woff'), /* Pretty Modern Browsers */
       url('onts/HYk2gj.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/HYk2gj.svg#svgFontName') format('svg'); /* Legacy iOS */
}