如何通过 CSS 设置“半粗体”字体？ 600 的字体粗细看起来不像我在 Photoshop 文件中看到的半粗体
Posted
技术标签:
【中文标题】如何通过 CSS 设置“半粗体”字体？ 600 的字体粗细看起来不像我在 Photoshop 文件中看到的半粗体【英文标题】：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 【发布时间】：2012-02-02 21:15:55 【问题描述】：我正在做 Photoshop 到Xhtml 的转换，网站设计师使用了 Myriad Pro Semi-bold 字体，在 photoshop 文件中看起来不错，但是当我尝试 CSS 中的 semi-bold 选项时，它看起来很像普通的粗体字体，这对我的目的来说太粗了。有没有办法在 HTML 和 CSS 中实现更好看的半粗体字体，还是我只是坚持使用 'font-weight: 600;'？
【问题讨论】：
您能否发布您的代码的 jsfiddle 以便我们重现您的错误？ Check this answer below 【参考方案1】：通过指定加载时所需的权重来选择字体
字体系列由几种不同的字体组成
例如，在 Photoshop 中，加粗会使字体看起来完全不同，因为您选择了不同的字体。这同样适用于斜体字体，它看起来确实非常不同。设置font-weight:800 或font-style:italic 可能会导致网络浏览器尽最大努力使家庭中的普通字体变胖或倾斜。
即使您正在加载字体系列，您也必须为某些 Web 浏览器指定所需的粗细和样式，以便您使用 font-weight 和 @ 在系列中选择不同的字体987654325@.
示例
此示例指定字体系列 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>参考
（Quora 警告，如果不允许请删除。）
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
测试
在 Mac 上的 Firefox 66.0.3 和 Windows 上的 Firefox 36.0.1 中经过测试。
非 Google 字体
其他字体必须上传到服务器，样式和粗细由它们各自的名称指定。
系统字体
在字体方面，不要假设什么设备正在访问您的网站或操作系统上安装了哪些字体。
（您可以使用 serif 和 sans-serif 的后备字体，但您将通过所使用的各个 Web 浏览器版本，在运行它的操作系统版本中可用的字体中获取字体映射到这些字体，而不是什么你设计的。）
测试应使用从系统中临时卸载的字体进行，以确保您的设计有效。
【讨论】：
不得不说，我没想到会在几秒钟内对唯一有效的答案投反对票。您可以通过添加/删除:100,400,400i,600,800 部分自行测试。
我完成了你的例子，让读者看到它有效。我希望这有助于在有用的答案中扭转反对意见。【参考方案2】：
到 2016 年年中，Chromium 引擎 (v53) 仅支持 3 种强调样式：
纯文本、粗体和超粗体...
<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>
【讨论】：
【参考方案3】：font-family: 'Open Sans';字体粗细：600；更改为不同的字体系列很重要
【讨论】：
【参考方案4】：对我来说，以下工作很好。只需添加它。您可以根据需要对其进行编辑。这只是我使用的一个好技巧。
text-shadow : 0 0 0 #your-font-color;
【讨论】：
这在某些情况下很有用。不知道为什么人们会这样对你投反对票。 是的，这是非常有用的 hack，可能不是正确的解决方案，但它给了我正在寻找的确切解决方案.. 谢谢 Raj.. 谢谢你，非常有用！ 在我的系统上看起来很模糊。【参考方案5】：实用的方法是将font-family设置为半粗体版本的特定名称，例如
font-family: "Myriad pro Semibold"
如果是这个名字。 （我个人使用我自己的 font listing tool，它在 Internet Explorer 上运行，只是通过名称来查看我系统中的字体，以便在 CSS 中使用。）
在这种方法中，不需要font-weight（最好不要设置）。
Web 浏览器在实现字体粗细方面一直很糟糕：除了粗体之外，它们基本上找不到特定的粗细版本。解决方法是在字体系列名称中包含信息，即使这不是应该的工作方式。
使用 Segoe UI 进行测试，在 Windows 系统上通常存在不同的字体粗细版本，我能够使 Internet Explorer 9 在使用逻辑方法时选择正确的版本（使用字体系列名称 Segoe UI 和不同的@987654326 @ 值），但在 Firefox 9 和 Chrome 16 上失败（仅正常和粗体工作）。例如，在所有这些浏览器上，设置 font-family: Segoe UI Light 都可以正常工作。
【讨论】：
@Django Reinhardt，您是否检查过您使用的名称是指您系统中实际拥有的字体，在该名称下？ 是的。它在 Photoshop 中显示为 Chaparral Pro - 权重设置为 Semibold，但“Chaparral Pro Semibold”恢复为 Times。 “Chaparral Pro”有效，就像错误的重量一样。感谢您的帮助。 如果您使用的是 Windows，请在 IE 上使用 cs.tut.fi/~jkorpela/listfonts1.html 以查看系统中具有浏览器识别名称的字体列表。 不幸的是我在 Mac 上，所以这不是一个选项。该死的。 似乎这种技术适用于 Chrome，但不适用于 Firefox（在 Mac 上）。如果您在 Mac 上，您可以通过打开字体簿，找到您的字体，然后右键单击 -> 验证字体来获取字体的 css 名称。然后它将显示字体的正确 otf 名称。【参考方案6】：在 CSS 中，font-weight 属性的值：normal 默认为数值 400，bold 为 700。
如果要指定其他权重，需要给出数值。该数值需要支持您使用的字体系列。
例如，您可以像这样定义半粗体：
font-weight: 600;
这里是 JSFiddle 使用 'Open Sans' 字体系列，加载了上述权重。
【讨论】：
这个答案和这个link 中的答案比为半粗体定义新名称要好 font-family: 'Open Sans';字体粗细：600；添加字体系列很重要 当您继承家族但又想改变体重时，这是一个更好的选择。以上是关于如何通过 CSS 设置“半粗体”字体？ 600 的字体粗细看起来不像我在 Photoshop 文件中看到的半粗体的主要内容，如果未能解决你的问题，请参考以下文章