如何通过CSS设置"半粗体"字体？字体权重600不会使它看起来像我在Photoshop文件中看到的半粗体

Question

我正在进行Photoshop-to- XHTML转换,网站设计师使用Myriad Pro Semi-bold字体在photoshop文件中看起来不错,但是当我在CSS中尝试半粗体选项时,它看起来非常像普通的粗体字体,对我来说太大胆了.有没有办法在HTML和CSS中实现更好看的半粗体字体,或者我只是坚持使用'font-weight:600;'？

Answer 1

在CSS中,对于font-weight属性,值:normal默认为数值400,并且bold为700.

如果要指定其他权重,则需要提供数字值.您正在使用的字体系列需要支持该数字值.

例如,您可以像这样定义半粗体:

font-weight: 600;

这里是一个使用'Open Sans'字体系列的JSFiddle,加载了上面的权重.

Answer 2

实用的方法是设置font-family一个值,该值是半隔行扫描版本的特定名称,例如

font-family: "Myriad pro Semibold"

如果这是名字.(就我个人而言,我使用自己的字体列表工具,它仅在Internet Explorer上运行,以查看我的系统中的字体,其名称可在CSS中使用.)

在这种方法中,font-weight不需要(并且最好不要设置).

Web浏览器在实现字体权重方面做得很差:除了粗体外,它们在很大程度上找不到特定的权重版本.解决方法是将信息包含在字体系列名称中,即使这不是事情应该如何工作.

使用Segoe UI进行测试,这通常存在于Windows系统上的不同字体权重版本中,我能够使用逻辑方法(使用字体系列名称Segoe UI和不同的font-weight值)使Internet Explorer 9选择正确的版本,但它在Firefox 9和Chrome 16上失败(只有正常和大胆的工作).例如,在所有这些浏览器上,设置font-family: Segoe UI Light工作正常.

Answer 3

对我来说,以下工作很好.只需添加它.您可以根据自己的要求进行编辑.这只是我使用的一个很好的技巧.

text-shadow : 0 0 0 #your-font-color;