时间戳

首页 > 解决方案 > Css加载字体：url中的#是什么意思以及如何添加GET参数？

css - Css加载字体：url中的#是什么意思以及如何添加GET参数？

问题描述

我正在使用带有 css/scss 的 fontawesome。字体嵌入在 scss 中，如下所示：

src: url('#{$fa-font-path}/fa-regular-400.eot');
src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');

为了使预加载在我们的服务器上正确运行，我需要添加一个 GET 参数（这是由于会话问题），所以我需要更改

fa-regular-400.woff2

至

fa-regular-400.woff2?preload

但是# 有什么作用？在网页上的“普通”URL 中，它是锚点，但在字体文件中？如何正确地将预加载参数添加到：

fa-regular-400.eot?#iefix
fa-regular-400.svg#fontawesome

是吗：

fa-regular-400.eot?#iefix&preload
fa-regular-400.svg#fontawesome?preload

或者

fa-regular-400.eot?preload#iefix
fa-regular-400.svg?preload#fontawesome

??

标签： csssasswebfonts

解决方案

fa-regular-400.eot?preload#iefix
fa-regular-400.svg?preload#fontawesome

这是正确的方法。这#part只是一个片段，在解析 HTTP 请求时通常会被完全忽略。我什至怀疑大多数浏览器甚至不会将其发送到服务器。

不过，您可能想仔细检查fa-regular-400.eot?preload#iefix旧的 IE 版本（IE11 之前），它的全部原因首先是他们的 CSS 解析器忽略了?我们滥用忽略其他字体格式之后的所有内容。

对于 SVG 字体，#id它只是告诉浏览器文件中的哪个 svg 元素用作字体。

推荐阅读