如何通过 CSS 设置“半粗体”字体？600 的字体粗细不会使它看起来像我在 Photoshop 文件中看到的半粗体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8735872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set 'semi-bold' font via CSS? Font-weight of 600 doesn't make it look like the semi-bold I see in my Photoshop file
提问by Simon Suh
I'm doing a Photoshop-to-XHTMLconversion, and the website designer used the Myriad Pro Semi-bold font which looks good in the photoshop file, but when I try the semi-bold option in CSS, it looks pretty much like a normal bold font, which is too bold for my purpose. Is there a way to achieve a nicer looking semi-bold font in HTML and CSS or am I just stuck with 'font-weight: 600;'?
我正在做 Photoshop 到XHTML 的转换，网站设计者使用了 Myriad Pro Semi-bold 字体，它在 photoshop 文件中看起来不错，但是当我在 CSS 中尝试使用半粗体选项时，它看起来很像正常的粗体字体，这对我的目的来说太粗了。有没有办法在 HTML 和 CSS 中实现更好看的半粗体字体，或者我只是坚持使用 'font-weight: 600;'？
采纳答案by Jukka K. Korpela
The practical way is setting font-familyto a value that is the specific name of the semibold version, such as
实用的方法是设置font-family一个值，即半粗体版本的具体名称，例如
font-family: "Myriad pro Semibold"
if that's the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)
如果那是名字。（我个人使用我自己的字体列表工具，该工具在 Internet Explorer 上运行只是为了通过在 CSS 中可用的名称查看系统中的字体。）
In this approach, font-weightis not needed (and probably better not set).
在这种方法中，font-weight不需要（可能最好不要设置）。
Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.
Web 浏览器在实现书中字体粗细方面一直很差：除了粗体之外，他们基本上找不到特定的粗细版本。解决方法是将信息包含在字体系列名称中，即使这不是应该的工作方式。
Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weightvalues), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Lightworks OK.
使用 Segoe UI 进行测试，它通常存在于 Windows 系统上的不同字体粗细版本中，当使用逻辑方法（使用字体系列名称 Segoe UI 和不同的font-weight值）时，我能够让 Internet Explorer 9 选择正确的版本，但它在 Firefox 9 和 Chrome 16 上失败（仅正常和大胆的工作）。例如，在所有这些浏览器上，设置font-family: Segoe UI Light工作正常。
回答by Jesús Carrera
In CSS, for the font-weightproperty, the value: normaldefaults to the numeric value 400, and boldto 700.
在 CSS 中，对于font-weight属性，值：normal默认为数值 400 和bold700。
If you want to specify other weights, you need to give the number value. That number value needs to be supported for the font family that you are using.
如果要指定其他权重，则需要给出数值。您使用的字体系列需要支持该数值。
For example you would define semi-bold like this:
例如，您可以像这样定义半粗体：
font-weight: 600;
Here an JSFiddleusing 'Open Sans' font family, loaded with the above weights.
这是一个使用“Open Sans”字体系列的JSFiddle，加载了上述权重。
回答by Raj
For me the following works good. Just add it. You can edit it as per your requirement. This is just a nice trick I use.
对我来说，以下效果很好。只需添加它。您可以根据需要对其进行编辑。这只是我使用的一个很好的技巧。
text-shadow : 0 0 0 #your-font-color;
回答by Martian2049
font-family: 'Open Sans'; font-weight: 600; important to change to a different font-family
font-family: 'Open Sans'; 字体粗细：600；更改为不同的字体系列很重要
回答by SomeUser
By mid-2016 the Chromium engine (v53) supports just 3 emphasis styles:
到 2016 年年中，Chromium 引擎 (v53) 仅支持 3 种强调样式：
Plain text, bold, and super-bold...
纯文本、粗体和超级粗体...
<div style="font:normal 400 14px Arial;">Testing</div>
<div style="font:normal 700 14px Arial;">Testing</div>
<div style="font:normal 800 14px Arial;">Testing</div>
回答by Henrik Erlandsson
Select fonts by specifying the weights you need on load
通过指定加载时所需的权重来选择字体
Font-families consist of several distinct fonts
字体系列由几种不同的字体组成
For example, extra-bold will make the font look quite different in say, Photoshop, because you're selecting a different font. The same applies to italic font, which can look very different indeed. Setting font-weight:800or font-style:italicmay result in just a best effort of the web browser to fatten or slant the normal fontin the family.
例如，超粗会使字体在 Photoshop 中看起来完全不同，因为您选择了不同的字体。这同样适用于斜体字体，它看起来确实非常不同。设置font-weight:800或font-style:italic可能导致增肥或倾斜的Web浏览器的只是尽力正常字体的家庭。
Even though you're loading a font-family, you must specify the weights and styles you needfor some web browsers to let you select a different font in the family with font-weightand font-style.
即使您正在加载字体系列，您也必须指定某些 Web 浏览器所需的粗细和样式，以便您可以使用font-weight和选择系列中的不同字体font-style。
Example
例子
This example specifies the light, normal, normal italic, bold, and extra-bold fonts in the font family Open Sans:
此示例指定字体系列 Open Sans 中的浅色、普通、普通斜体、粗体和加粗字体：
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
<style>
body {
font-family: 'Open Sans', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div style="font-weight:400">Didn't work with all the fonts</div>
<div style="font-weight:600">Didn't work with all the fonts</div>
<div style="font-weight:800">Didn't work with all the fonts</div>
</body>
</html>Reference
参考
(Quora warning, please remove if not allowed.)
（Quora警告，如果不允许，请删除。）
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
Testing
测试
Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.
在 Mac 上的 Firefox 66.0.3 和 Windows 上的 Firefox 36.0.1 中进行了测试。
Non-Google fonts
非 Google 字体
Other fonts must be uploaded to the server, style and weight specified by their individual names.
其他字体必须上传到服务器，样式和粗细由各自的名称指定。
System fonts
系统字体
Assume nothing, font-wise, about what device is visiting your website or what fonts are installed on its OS.
对于正在访问您网站的设备或其操作系统上安装了哪些字体，在字体方面不作任何假设。
(You may use the fall-backs of serif and sans-serif, but you will get the font mapped to these by the individual web browser version used, within the fonts available in the OS version it's running under, and not what you designed.)
（您可以使用 serif 和 sans-serif 的后备方案，但是您将通过所使用的单个 Web 浏览器版本将字体映射到这些字体，在它运行的操作系统版本中可用的字体内，而不是您设计的字体。 )
Testing should be done with the font temporarily uninstalled from your system, to be sure that your design is in effect.
应使用暂时从系统中卸载的字体进行测试，以确保您的设计有效。
