css引入带版本号的字体

在网页开发中，为了提高网页的加载效率，我们通常会使用静态资源缓存技术。而在引入 CSS 字体文件时，如何让浏览器正确识别缓存版本呢？这就需要使用带版本号的字体文件引入方式了。

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto.woff2?v=1.0") format("woff2");
    /* 版本号 ?v=1.0 */
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "Roboto",sans-serif;
}

如上所示，我们在引入字体文件时在其 URL 后添加了版本号参数 "?v=1.0"。这里的版本号可以是任何你自己指定的字符串，只要保证每次更新字体文件时更改版本号即可。这样做的好处是可以避免浏览器缓存旧版本的字体文件而导致样式变化不正确的问题。

值得注意的是，除了字体文件，我们还可以在引入其他静态资源时添加版本号参数，比如图片、样式表等等。这对于前端工程师来说都是一些基本技能，掌握好这些技能可以更好的提高静态资源的加载速度，为用户带来更好的体验。