blocks|key|3078887|text|可能是浏览器不支持.ttf文件。考虑使用fontsquirrel，它将为您生成所有必需的文件(.ttf、.woff、.svg、.eot)和css，并且可以在所有浏览器中运行。我一直在用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3078888|entityMap|0|LINK|mutability|MUTABLE|url|http://www.fontsquirrel.com/^0|K|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

It might be the browser is just not supporting the .ttf file. Consider working with <a href="http://www.fontsquirrel.com/" rel="nofollow">fontsquirrel</a>, it will generate all required files (.ttf, .woff, .svg, .eot) and css for you, and works in all browsers. I use it all the time...

blocks|key|220306|text|根据font+Squirrel的一个示例字体页面，IE9和Firefox都要求字体文件来自与其加载到的页面相同的域。因此，使用@+font+-face，您唯一的选择是找到您尝试使用的字体文件并将其上传到站点，然后使用类似于以下代码的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220307|@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+*/
}|code-block|syntax|javascript|220308|摘自http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax|offset|length|220309|编辑:+Font+Squirrel页面的另一件事是，如果您使用的是IIS服务器，则需要将文件类型添加到MIME类型列表中。|220310|entityMap|0|LINK|mutability|MUTABLE|url|http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax^0|0|0|2|22|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

According to a sample font page from Font Squirrel, Both IE 9 and Firefox require font files to be served from the same domain as the page they are loaded into. So with @font-face, your only option is to find the font file(s) you are trying to use and upload them to the site, and then use code similar to the following:

<pre><code>@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 */
}
</code></pre>

Taken from <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax" rel="nofollow">http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax</a>

EDIT: One more thing from the Font Squirrel page, if you are using an IIS server, the file types need to be add to the list of MIME types.

blocks|key|2865619|text|你只需要一个网页开放字体格式的字体文件。转到http://www.fontconverter.org以转换您的OpenSymbol.tff+to+OpenSymbol.woff。我是一名跨平台开发人员，我在以下平台上测试了它的运行情况：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2865620|(iMac)|2865621|Internet+10.12.4+(iMac)|unordered-list-item|2865622|
|2865623|Internet+Explorer11.0和Firefox+52.0.1以及macOS+7(PC)上的+Chrome+52.0和Opera53.0+iOS+10.3.1+(iPhone)|2865624|Chrome+57.0上的|ordered-list-item|2865625|Safari和安卓5.0.2+(华硕平板电脑)|2865626|上的华硕浏览器2.0.3|2865627|2865628|这放在css中：|2865629|/*+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;
..|code-block|syntax|javascript|2865630|不需要费心使用嵌入式OpenType字体文件，因为只有IE9+(2011)和IE10+(2012)才需要它们。不需要为可伸缩矢量图形(+Scalable+Vector+Graphics，SVG)字体而烦恼，因为从iOS+5.0开始不再需要它们|2865631|自2012年以来，Web+Open+Font+Format+(WOFF)已经被所有已知的浏览器完全支持。Truetype字体在iMac和PC上本地使用，也可以在安卓和iPhone上本地使用。这就是为什么web开发人员经常犯这个错误，使用TTF而不是WOFF来创建站点。|2865632|entityMap|0|LINK|mutability|MUTABLE|url|http://www.fontconverter.org/^0|1J|X|M|S|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|F|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1M|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|1N|8|@]|D|@]|E|$]]|$1|M|3|N|5|J|7|1O|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1P|8|@]|D|@]|E|$]]|$1|R|3|S|5|Q|7|1Q|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1R|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1T|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|10|7|1U|8|@]|D|@]|E|$11|12]]|$1|13|3|14|5|6|7|1V|8|@]|D|@]|E|$]]|$1|15|3|16|5|6|7|1W|8|@]|D|@]|E|$]]|$1|17|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|18|$19|$5|1A|1B|1C|E|$1D|1E]]]]

You just need one font file in web open font format. Go to <a href="http://www.fontconverter.org" rel="noreferrer">http://www.fontconverter.org</a> to convert your <code>OpenSymbol.tff to OpenSymbol.woff</code>. I am a cross-platform developer and i tested this works okay on:

<ol>
<li>Safari 10.1 and Firefox 52.0.2 on macOS 10.12.4 (iMac)</li>
<li>Internet Explorer 11.0 and Firefox 52.0.1 and Google Chrome 52.0 and Opera 53.0 on Windows 7 (PC)</li>
<li>Safari on iOS 10.3.1 (iPhone)</li>
<li>Chrome 57.0 and Asus Browser 2.0.3 on Android 5.0.2 (Asus tablet)</li>
</ol>

This goes in the css:

<pre><code>/* 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;
..
</code></pre>

No need to bother with Embedded OpenType (EOT) fontfiles, because they are only needed for IE9 (2011) and IE10 (2012).
No need to bother with Scalable Vector Graphics (SVG) fonts, because they're no longer needed since iOS 5.0

Already since 2012 Web Open Font Format (WOFF) is fully supported by every known browser. Truetype Fonts (TTF) are used local on iMac and PC, and can be used local on Android and iPhone as well. That's why web developers often make this mistake, using TTF instead of WOFF for a site.

I need to include a font (OpenSymbol) in a html file and the font file is in a local folder (I know the exact absolute path to it). If I use @font-face like this:

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

It works in Chrome, Opera and Safari, but not in Firefox neither IE9. Other @font-face usage works perfectly fine in all browsers.

Btw, in Chrome, I get a warning:

<pre><code>Resource interpreted as Font but transferred with MIME type application/octet-stream
</code></pre>

What can I do to cleanly include a locally stored font which is not installed on the OS?

Edit:

I found out that the listing of different urls seems not to work! Chrome loads the font if I put the <code>[...].ttf</code> url in the first place, but not if it's somewhere else!

2nd Edit:

I got it to work in all browsers except firefox:

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

and then

<pre><code>.element {
 font-family: OpenType, OpenTypeEOT, [...];
}
</code></pre>

Anyway, it does work in IE but not in eclipse, which uses IE's rendering engine... o.O

Btw, firefox has problems because of security issues: <a href="https://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie">See here</a>

@font-face url pointing to local file

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要在html文件中包含一个字体(OpenSymbol)，而该字体文件位于本地文件夹中(我知道它的确切绝对路径)。如果我像这样使用@font-face：@font-face { font-family: "OpenSymbol"; src: url("<absolutePath>/OpenSymbol.ttf")...

问@font-face指向本地文件的url
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@font-face指向本地文件的urlEN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@font-face指向本地文件的url
EN