我正在进行Photoshop到XHTML的转换，网站设计师使用Myriad Pro半粗体字体在photoshop文件中看起来不错，但是当我在CSS中尝试半粗体选项时，它看起来非常像普通的粗体字体，这对我来说太大胆了。有没有办法在HTML和CSS中实现更好看的半粗体字体，或者我只是坚持使用'font-weight：600;'？
答案 0 :(得分：58)
在CSS中，对于font-weight属性，值：normal默认为数值400，bold默认为700。
如果要指定其他权重，则需要提供数字值。您正在使用的字体系列需要支持该数值。
例如，您可以像这样定义半粗体：
font-weight: 600;
这是JSFiddle使用'Open Sans'字体系列，加载了上述权重。
答案 1 :(得分：38)
实用的方法是将font-family设置为半群版本的特定名称，例如
font-family: "Myriad pro Semibold"
如果那是名字。 （就我个人而言，我使用自己的font listing tool，它只在Internet Explorer上运行，以查看我的系统中的字体名称在CSS中可用。）
在这种方法中，不需要font-weight（可能最好不要设置）。
Web浏览器在实现字体权重方面做得很差：除了粗体外，它们在很大程度上找不到特定的权重版本。解决方法是将信息包含在字体系列名称中，即使这不是事情应该如何工作。
使用Segoe UI进行测试，这通常存在于Windows系统上的不同字体权重版本中，我能够使用逻辑方法（使用字体系列名称Segoe UI和不同的{{}使Internet Explorer 9选择正确的版本1}}值），但它在Firefox 9和Chrome 16上失败（只有正常和大胆的工作）。例如，在所有这些浏览器中，设置font-weight可以正常工作。
答案 2 :(得分：26)
对我而言，以下效果很好。只需添加它。您可以根据自己的要求进行编辑。这只是我使用的一个很好的技巧。
text-shadow : 0 0 0 #your-font-color;
答案 3 :(得分：2)
font-family：'Open Sans'; font-weight：600;更改为其他字体系列非常重要
答案 4 :(得分：1)
到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>
答案 5 :(得分：-2)
例如，如果您选择的是不同字体，则超粗体会使字体在Photoshop中看起来完全不同。斜体字体也是如此，看起来确实很不一样。设置font-weight:800或font-style:italic 可能会导致网络浏览器尽最大努力来增添或倾斜家族中的普通字体。。 >
即使您正在加载字体系列，对于某些网络浏览器，您必须指定所需的粗细和样式，以便您可以使用font-weight选择该系列中的其他字体和font-style。
此示例指定Open Sans字体家族中的浅色，常规，常规斜体，粗体和超粗体：
<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800" rel="stylesheet">
（警告警告，如果不允许，请删除。）
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中工作。
必须将其他字体，样式和粗细（由其各自的名称指定）上载到服务器。
在字体方面，不假设什么设备正在访问您的网站或其操作系统上安装了什么字体。
（您可以使用serif和sans-serif的后备，但是您将获得使用的单个Web浏览器版本映射到这些字体的字体，这些字体是在其运行的OS版本中可用的字体范围内，而不是在您设计的。）
应使用从系统临时卸载的字体进行测试，以确保您的设计有效。