在css中直接调用
font-family:"dot";在调用的css文件头写上 @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } 各种浏览器对应的不同的字体文件 Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。@font-face怎么用 怎么生成对应的字体文件 首先,下载好你需要的字体文件,一般都是ttf格式可以搜索在线生成字体网站,我用的是@font-face生成器按照网站上的教程,把字体拖进对应的位置,选择生成需要等待一段时间,网站会提示下载,下载生成的zip或者rar包包内会有css标识,是对应的css代码,可以直接复制粘贴进自己的css文件中我遇到的问题是,idea会提示,woff2格式的出现warning,直接删掉与woff2相关的就可以了怎么引入项目中 在项目中新建一个文件夹放入所有生成的字体,建议放在与网页页面同级的路径下在所有用到了你引入的字体的css文件中头部加入这一段代码@font-face会对项目造成什么影响 好的方面 当然是好看是用正确的字体会减少很多麻烦,比如使用图片会造成一定程度上页面放大缩小格式变动的问题不好的方面 加载慢 在自己的本地启动项目不会出现这种问题部署到服务器后,每次打开网页都需要加载项目中的文件,直接引入所有的字体文件会比较缓慢,造成网页打开慢的情况(比如我的项目)不同的浏览器下,字体的显示情况也可能不一样,并不一定美观 其实我的项目有这种问题,火狐和谷歌打开就不太一样,有一个略显臃肿解决办法 只是一定程度上加快网页加载使用字体压缩器 网上有很多,比如font-spider,fontmin我使用的是fontmin - 字体子集官网长这个样子直接点击应用,可以下载软件使用,默认是windows系统的,下方也可以选择下载os系统的就是直接把压缩包打开,然后可以看到exe文件,执行就可以了,但是不会自动在桌面生成快捷方式,需要自己添加使用也简单,将用到的文字打在左边,把需要的ttf字体拖进下方的字体框,右边可以直接看到字体的效果,还能及时看到字体有没有用……我就是这样换了一个字体的
最后的结果是没有是用软件之前,加载fonts文件夹用了接近60s,使用后节省了至少一半的时间转载于:https://www.cnblogs.com/wowocandy-milk/p/9008174.html