blocks|key|2001309|text|在使用“自己”字体时，请分别确保某个字体可用，您应该遵循某些内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2001310|首先如何使用@font-face|offset|length|style|CODE|2001311|始终使用数字(100+-+900)作为字体重量，并定义字体样式(大多数字体都有普通和斜体的单独文件(对于不同的厚度=字体重量)。|2001312|@font-face+{
++++font-family:+'MyAwesomeFont';
++++src:+'...';
++++font-weight:+400;+/*+'normal'+equals+to+'400'+*/
++++font-style:+normal;
}

@font-face+{
++++font-family:+'MyAwesomeFont';
++++src:+'...';
++++font-weight:+700;+/*+'bold'+depends+on+your+available+font+files,+normally+it+is+equal+to+'700'+*/
++++font-style:+normal;
}|code-block|syntax|javascript|2001313|您可以在这个站点上找到一些关于font-weight的更多信息：https://developer.mozilla.org/en/docs/Web/CSS/font-weight|2001314|如果未加载所需的字体，则可以检查以下要点：|2001315|确保源中只给出了所需的格式(例如，WOFF)，并使用浏览器的developer工具检查文件是否正确加载并查看预览(应该显示给定字体的所有可用字符)。|ordered-list-item|2001316|不能在测试/本地系统上使用/安装所需的字体。|2001317|如果您已经使用“字体生成器”(如font+)生成字体文件，请重新执行该过程(因为文件可能已损坏)。如果这没有帮助，请尝试找到另一个源文件(在大多数情况下是字体的TTF文件)，并使用它生成其他格式。如果这仍然不能解决您的问题，去使用另一个“字体生成器”。|2001318|2001319|2001320|还要确保所有使用的字符都在字体文件的子集中。|2001321|如果你还遇到什么问题，再来这里告诉我们。;-)|2001322|祝你好运和成功！|2001323|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/CSS/font-weight^0|0|6|A|0|0|0|F|B|W|1L|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1J|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1K|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1L|8|@$D|1M|E|1N|F|G]]|9|@$D|1O|E|1P|1|1Q]]|A|$]]|$1|Q|3|R|5|6|7|1R|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|1S|8|@]|9|@]|A|$]]|$1|V|3|W|5|U|7|1T|8|@]|9|@]|A|$]]|$1|X|3|Y|5|U|7|1U|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1X|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|1E]]]]

When using your "own" fonts, respectively make sure that a certain font is available you should follow certain things.

Firstly how to use <code>@font-face</code>: 
Always use a number (100 - 900) for the font-weight and also define the font-style (most fonts have separate files for normal and italic (for different thickness = font-weight)

<pre><code>@font-face {
 font-family: 'MyAwesomeFont';
 src: '...';
 font-weight: 400; /* 'normal' equals to '400' */
 font-style: normal;
}

@font-face {
 font-family: 'MyAwesomeFont';
 src: '...';
 font-weight: 700; /* 'bold' depends on your available font files, normally it is equal to '700' */
 font-style: normal;
}
</code></pre>

You'll find some further information about <code>font-weight</code> on this site: <a href="https://developer.mozilla.org/en/docs/Web/CSS/font-weight" rel="nofollow">https://developer.mozilla.org/en/docs/Web/CSS/font-weight</a>

If the desired font is not loaded, you can check the following points:

<ol>
<li>Make sure that only the needed format (e.g. WOFF) is given in the source and use the developer tool of your browser to check if the file is loaded correctly and watch the preview (should show all available characters of the given font).</li>
<li>The desired font must not be available/ installed on your test/ local system.</li>
<li>If you have generated the font files using a "Font Generator" (like Font Squirrel's) re-do the process (because maybe the file was corrupted). If this doesn't help, try to find another source file (in most cases the TTF file of the font) and use this for generating the other formats. If this still doesn't solve your problem go and use another "Font Generator".</li>
</ol>

Also ensure that all used characters are in the subset of your font file(s).

If you still encounter any problems come here again and let us know. ;-)

Good luck and success!

blocks|key|2001374|text|问题是“更大胆的”和“打火机”声明。不知怎么的，@字体-face并不适合那些字体权重声明。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2001375|我到处玩，想弄清楚为什么我的常规字体总是那么大胆。字体声明的顺序也带来了一些不同，但它的行为还是很奇怪。|2001376|然后，我用一个数字"900“代替了”更大胆“的说法，突然，一切都如愿以偿。|2001377|我还没有发现其他博客谈论这个问题。这个问题发生在火狐，Chrome，至少是IE11。|2001378|尽管IE11似乎对“更轻”的说法不太满意。|2001379|因此，要确定，只需使用数字(100至900)或粗体。不是更大胆或更轻的|2001380|entityMap^0|B|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|W|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|X|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|Y|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|Q|$]]

The problem is the "bolder" and "lighter" statement. Somehow @font-face doesn't play nice with those font-weight declaration.

I was playing around, trying to figure out why my regular font was bold all the time. The order of the font-face declaration also made a difference, but still it acted weird.

Then I replaced the "bolder" statement with a number "900", and suddenly everything worked as it should.

I didn't find any other blogs talking about this problem yet. This issue happens in Firefox, Chrome and at least IE11.

Although IE11 doesn't seem to play nice with the "lighter" statement.

So to be sure, just use numbers (100 to 900) or bold. not bolder or lighter

I've run into an extremely weird bug. I have set up a custom font-face:

<pre><code>@font-face {
 font-family: 'MyAwesomeFont';
 src: '...';
 font-weight: 'normal;
}

@font-face {
 font-family: 'MyAwesomeFont';
 src: '...';
 font-weight: 'bold;
}
</code></pre>

There's like 3 more, all with the same name but different <code>font-weight</code> (a <code>bolder</code>, <code>100</code> and <code>200</code>). When using the <code>normal</code> one, Firefox uses the <code>bold</code> one instead - I mean, it doesn't tell me it uses the other one, but other browsers don't behave like that at all...

I tried using an arbitrary value instead of <code>normal</code> but that just screwed up things for other browsers. Any ideas what I should try to do?

update

I just used exact numbers for all the font-faces. I used 400 for the normal one, so technically it's the same. But now Firefox renders it correctly. I'm very unsure as to what exactly happened...

font-face on firefox causes trouble when using font-weight normal

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

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

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

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

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我碰到了一个非常奇怪的虫子。我已经设置了一个自定义字体：@font-face {    font-family: 'MyAwesomeFont';    src: '...';    font-weight: 'normal;}@font-face {    font-family: 'MyAwesomeFont'; ...

问firefox上的字体面板在正常使用字体时会引起麻烦。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问firefox上的字体面板在正常使用字体时会引起麻烦。EN