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

Question

我在 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

??

Answer 1

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

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

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

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

Answer 2

如果字体是 OpenType 集合，片段会指示要加载集合中的哪种字体。

如果未指定或无法识别，则从集合中加载第一个字体 (ref)

如果不是 OpenType 集合，则会被忽略。

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

Css loading font: What does the # in a url mean and how to add a GET-parameter?

css

sass

webfonts