Html @指向本地文件的字体面url

我需要在html文件中包含字体（OpenSymbol），并且字体文件位于本地文件夹中（我知道它的确切绝对路径）。如果我像这样使用@font-face：

@font-face {
  font-family: "OpenSymbol";
  src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}

我该怎么做才能干净地包含本地存储的字体，而该字体未安装在操作系统上

编辑：

我发现不同URL的列表似乎不起作用！如果我把

[…].ttf

url放在第一位，Chrome会加载字体，但如果它在其他地方，则不会加载

第二次编辑：

我让它在除firefox之外的所有浏览器中都能工作：

@font-face { 
  font-family: 'OpenSymbol';
  src: url('file:<path>/openSymbol.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face { 
  font-family: 'OpenSymbolEOT';
  src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
...

无论如何，它在IE中可以工作，但在eclipse中不行，后者使用IE的渲染引擎。。。o、 o

---

顺便说一句，firefox存在安全问题：

可能是浏览器不支持.ttf文件。考虑使用它，它将生成所有需要的文件（.TTF、.WOFF、.SVG、.EOT）和CSS，并在所有浏览器中运行。我一直在使用它…

根据font Squirrel的字体页面示例，IE 9和Firefox都要求字体文件与加载到的页面来自同一个域。因此，对于@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.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

取自

---

编辑：字体Squirrel页面中还有一件事，如果您使用的是IIS服务器，则需要将文件类型添加到MIME类型列表中。

您只需要一个web open字体格式的字体文件。转到将您的

OpenSymbol.tff转换为OpenSymbol.woff

。我是一名跨平台开发人员，我在以下平台上测试了此功能：

macOS 10.12.4（iMac）上的Safari 10.1和Firefox 52.0.2

Windows 7（PC）上的Internet Explorer 11.0和Firefox 52.0.1、Google Chrome 52.0和Opera 53.0

iOS 10.3.1（iPhone）上的Safari

Android 5.0.2（华硕平板电脑）上的Chrome 57.0和华硕浏览器2.0.3

这在css中出现：

/* Add the decaration on top */
@font-face { 
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */ 
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..

无需担心嵌入式OpenType（EOT）文件，因为它们只适用于IE9（2011）和IE10（2012）。 无需为可缩放矢量图形（SVG）字体操心，因为自iOS 5.0以来不再需要它们

---

自2012年以来，所有已知浏览器都完全支持Web开放字体格式（WOFF）。Truetype字体（TTF）在iMac和PC上本地使用，也可以在Android和iPhone上本地使用。这就是为什么web开发人员经常犯这样的错误，对站点使用TTF而不是WOFF

“本地”文件到底是什么意思？用户文件系统上的本地URL？据我所知，该警告没有多大关系（如果我错了，请告诉我）。这只意味着调用该字体的服务器发送了错误的字体标题。据我所知，您唯一能做的就是编辑服务器设置以更改它为.otf文件发送的头文件（我相信这就是扩展名）。只要字体显示正确，从经验来看这没什么大不了的。@Pekka：是的，没错。例如（在Windows上）：

文件：/C:/path/to/folder/openSymbol.ttf

如果用户有字体，则没有理由使用@font-face，如果没有，则CSS将无法工作。另外IE 9需要一个@font-face的特殊实现，我认为IE中加载的字体必须是.eot.No，用户没有字体！它用于带有html界面的eclipse插件，字体文件是插件的一部分。我用

.eot？

试过了，没用…：（真的吗？这可能意味着该字体已获得许可，您甚至不允许将其用作webfont…IE和Firefox对字体文件都有相同的域限制。我必须对其进行详细测试，但使用fontsquirrel字体和@font face（当然要替换路径）产生了与以前相同的结果…检查它：在fontsquirrel提供的示例中它甚至不工作！fontsquirrel的字体也不工作，甚至chrome中的.ttf也不工作！我以前使用的本地字体不工作。我没有使用服务器，所有内容都在文件系统上本地运行。如果将字体文件放在同一目录中，请查看它是否工作将ectory作为样式表，并使用相对路径加载它们。有关浏览器支持：

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

/* Add the decaration on top */
@font-face { 
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */ 
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..