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

html-css014

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

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

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

数据文件

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

浏览器缓存

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

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

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

步骤如下:

1、首先打开电脑上自带的记事本程序,然后输入html网页基本结构语句。<html><body></body></html>

2、由于css样式必须在标签<head></head>之间,因此我们点击<html>后面,输入<head></head>标签。

3、在head标签之间输入样式标签<style></style>,然后定义一些属性,例如

<style type="text/css">

body {background-color: yellow} 定义网页背景色为黄色;

h1 {background-color: #00ff00} 定义h1标签背景色为#00ff00;

h2 {background-color: transparent} 定义h2标签背景色为透明;

p {background-color: rgb(250,0,255)} 定义p标签背景色为rgb值;

p.no2 {background-color: graypadding: 20px} 这个定义class属性为no2的p标签背景色为灰色,并且边距为20px;

</style>

4、然后点击body标签后面输入正文标签内容,例如

<h1>这是KING</h1>

<h2>这是KING</h2>

<p>这是KING</p>

<p class="no2">这个KING设置20内边距。</p>

5、点击记事本菜单中的文件,选择另存为,把内容保存为html网页格式。双击打开预览效果。6、我们可以发现代码中两个同样的<p>标签显示的css样式却不同,区别就在于样式中定义的p.no2,这就是正文代码中class="no2"的优势所在,可以定义个性风格。