在CSS文件中，如何为字体的svg格式构建url？

Question

目的

在我的项目中实现字体的svg格式

背景

确保我正确设置路径。我可以在@font-face上查看我的浏览器上的字体以包含各种字体文件。我使用了下载字体时的建议。但我只是确保SVG部分是正确的。

我浏览了一下并在CSS Tricks中找到了Using @font-face。它给出了这个例子：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
} 

但除非你在子目录中有字体，否则这似乎非常明确。在我的情况下，我有

url('../assets/fonts/din/din-regular-webfont.svg#din-regular-webfont') format('svg');

这就是我目前使用字体的方式

的index.html

<!-- in the head -->
<link href="css/main.css" rel="stylesheet" media="screen">
<link href="css/fonts.css" rel="stylesheet" media="screen">
<!-- in a paragraph that uses the font -->
<p class="fnt-din-regular">This is: DIN Regular</p>

的main.css

.fnt-din-regular {     font-family：＆＃39; DIN_Regular＆＃39 ;; }

fonts.css

@font-face {
    font-family: 'DIN_Regular';
    src: url('../assets/fonts/din/din-regular-webfont.eot');
    src: url('../assets/fonts/din/din-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/fonts/din/din-regular-webfont.woff2') format('woff2'),
         url('../assets/fonts/din/din-regular-webfont.woff') format('woff'),
         url('../assets/fonts/din/din-regular-webfont.ttf') format('truetype'),
         url('../assets/fonts/din/din-regular-webfont.svg#din-regular-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

但最后一部分是否正确？它应该保持

url('../assets/fonts/din/din-regular-webfont.svg#din-regular-webfont') format('svg');

或是

url('../assets/fonts/din/din-regular-webfont.svg#DIN_Regular') format('svg');

我不明白哈希之后会发生什么。请解释为什么这是错误或正确的。

Answer 1

如果您在文本编辑器中打开SVG字体，您应该会看到其中有<font>...</font>元素。

该元素应具有id属性，您将在URL中的#之后使用该属性，例如：

<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <font id="Font2" horiz-adv-x="1000">
      ...
    </font>
  </defs>
</svg>

在上面的示例中，URL类似于：

url('../assets/fonts/din/din-regular-webfont.svg#Font2') format('svg');