css中引入字体文件ttf或者woff的时候后面带餐是怎么实现的

html-css017

css中引入字体文件ttf或者woff的时候后面带餐是怎么实现的,第1张

这是个随机字串，如果没有这个，那么浏览器每次都会从缓存中读取字体文件（除非网页是首次运行）；而如果有了这个字串，浏览器就会认为这是个新的url，就会重新从网上下载这个字体文件而不是从缓存中读取；当然，如果下下次这个字串没有变化，那么浏览器仍然会从缓存中去读取的。

所以这种技术通常用于网页

数据文件

的版本有变化时可以让浏览器立刻使用新版本的内容及代码，比如说js文件和css文件，修改后再上传到网站，用户在网页上是不会立刻看到修改后的效果的，必须等

浏览器缓存

的生命周期到期（或者让用户手动清理缓存）后才会更新，遇到这种情况，网页设计者就可以在文件名的后面加个问号再加个随机的字符串，用户只要一刷新网页就可以立刻看到新效果了。

不过像字体文件这种通常都是没什么变化的，所以并不适合用这种更新技术，尽量让浏览器直接从缓存中读取即可，这样可以加快网页的加载速度，提高效率。也就是说你把问号以及后面的一大串字符都删掉也是没问题的。

至于如何实现，你可以利用前端或后台脚本来生成随机字符串并拼接到文件路径的后面（用问号分隔）来实现这种效果。

css引用字体问题

在CSS中通过@font-face属性来实现网页中嵌入特殊字体。

首先获取要使用字体的三种文件格式.EOT、.TTF或.OTF、.SVG，确保能在主流浏览器中都能正常显示该字体。

.EOT，适用于Internet Explorer 4.0+

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera

.SVG，适用于Chrome、IPhone

最常见的是.TTF文件，需要通过这种文件格式转换为其余两种文件格式。

在css中进行如下声明：

@font-face {

font-family: 'fontNameRegular'

src: url('fontName.eot')

src: local('fontName Regular'),

local('fontName'),

url('fontName.woff') format('woff'),

url('fontName.ttf') format('truetype'),

url('fontName.svg#fontName') format('svg')

}

/*其中fontName替换为你的字体名称*/

在css中使用这个字体

h1{font-family: fontNameRegular}