| 关于html：@ font | 您所在的位置：网站首页 › fonttff › 关于html：@ font |
|
我需要在html文件中包括一种字体(OpenSymbol)，并且该字体文件位于本地文件夹中(我知道它的确切绝对路径)。 如果我这样使用@ font-face： 1234@font-face { font-family:"OpenSymbol"; src: url("/OpenSymbol.ttf") format("truetype"); }它适用于Chrome，Opera和Safari，但不适用于Firefox和IE9。 其他@ font-face用法在所有浏览器中都可以正常使用。 顺便说一句，在Chrome中，我收到警告： 1Resource interpreted as Font but transferred with MIME type application/octet-stream如何清除操作系统中未安装的本地存储字体？ 编辑： 我发现列出不同的URL似乎无效！ 如果我将[...].ttf网址放在首位，Chrome会加载该字体，但是如果它在其他地方，则不会加载字体！ 第二次编辑： 我得到它可以在除Firefox外的所有浏览器中工作： 12345678910111213@font-face { font-family: 'OpenSymbol'; src: url('file:/openSymbol.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSymbolEOT'; src: url('file:/openSymbol.eot') format('embedded-opentype'); font-weight: normal; font-style: normal; } ...然后 123.element { font-family: OpenType, OpenTypeEOT, [...]; }无论如何，它确实可以在IE中工作，但不能在使用IE渲染引擎的eclipse中工作。 顺便说一句，由于安全问题，firefox出现了问题：请参阅此处 相关讨论 您所说的"本地"文件到底是什么意思？用户文件系统上的本地URL？ 据我所知，该警告没有太大的意义(如果我错了，请告诉我)。这仅表示从发送的带有错误字体的标头中调用了字体的服务器。据我所知，您唯一可以做的就是编辑服务器设置，以更改它为.otf文件发送的标头(我相信这是扩展名)。只要字体显示正确，从经验上来说就没什么大不了的。 @Pekka：是的，完全是。例如(在Windows上)：file:C:pathtofolderopenSymbol.ttf 如果用户使用字体，则没有理由使用@ font-face，如果用户没有使用字体，则CSS将无法工作。 IE 9也需要@ font-face的特殊实现，我认为IE中加载的字体必须为.eot。 不，用户没有字体！它在带有html界面的eclipse插件中使用，并且字体文件是该插件的一部分。我用.eot?尝试了一下，没有帮助... :( 使用相对于CSS的路径行不通？假设CSS和字体都是本地的，则相对路径应该起作用-url(../ fonts / myFont.ttf)...您只需要一个Web开放字体格式的字体文件。转到http://www.fontconverter.org转换您的OpenSymbol.tff to 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(Asus平板电脑)上的Chrome 57.0和Asus Browser 2.0.3这在CSS中： 1234567891011/* 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。 根据Font Squirrel的一个示例字体页面，IE 9和Firefox都要求字体文件与它们加载到的页面来自同一域。因此，使用@ font-face，您唯一的选择是找到您要使用的字体文件并将其上传到站点，然后使用类似于以下内容的代码： 12345678@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 */ }取自http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax 编辑：从字体松鼠页面的另一件事，如果您使用的是IIS服务器，则需要将文件类型添加到MIME类型的列表中。 相关讨论 我没有使用服务器，所有文件都在本地运行。 看看是否将字体文件放在与样式表相同的目录中并使用相对路径加载它们是否可行。可能是浏览器不支持.ttf文件。考虑使用fontsquirrel，它将为您生成所有必需的文件(.ttf，.woff，.svg，.eot)和css，并且可以在所有浏览器中使用。我用它所有的时间... 相关讨论 真的吗 这可能意味着该字体已获得许可，甚至可能甚至不允许您将其用作网络字体... IE和Firefox在字体文件上都具有相同的域限制 我得详细测试一下，但采用fontsquirrel字体和@ font-face(当然取代了路径)会产生与以前相同的结果... 已检查：在fontsquirrel提供的示例中，它甚至都无法工作！ 而且fontsquirrel中的字体不起作用，甚至连chrome中的.ttf都不起作用！ 我以前在本地工作过。 |
| CopyRight 2018-2019 实验室设备网 版权所有 |