简体繁体 English

CSS字体重量-看不见的差异？

[英]CSS Font-weight -unseen differences?

原文 2013-02-25 14:38:35 3 2 html/ css/ fonts

I made this simple demo . 我做了这个简单的演示。

I can see in Visual studio , all the values which font-weight can have : 我可以在Visual Studio中看到font-weight可以具有的所有值：

在此处输入图片说明

However when I tried all those values, I could locate only 4 distincts. 但是，当我尝试所有这些值时，我只能找到4个不同的值。

在此处输入图片说明

I added those red rectangles so you can see who has the same width. 我添加了那些红色矩形，以便您可以看到谁具有相同的宽度。

why those all in the middle ( and those last) looks the same ? 为什么中间的所有（和最后一个）看起来都一样？ why do I need all those numbers? 为什么我需要所有这些数字？

2 个解决方案

Different fonts have different font weights available to them. 不同的字体可以使用不同的字体粗细。 Your browser is not attempting to simulate the missing weights (which is a good thing, that is hard to get right), so you are limited to the weights that exist in the installed version of the font you are using. 您的浏览器没有在尝试模拟丢失的粗细（这是一件好事，很难做到正确），因此您只能使用所安装字体的已安装版本中存在的粗细。

This can be either because the font doesn't support so many different weights or the browser can't display those weights. 这可能是因为字体不支持太多不同的粗细，或者浏览器无法显示这些粗细。

Regardless, the numbers have to be there because that's how font weights work. 无论如何，数字都必须存在，因为这是字体粗细的工作方式。 If a font does support different weights then it is up to the browser to display it as accurately as it can; 如果字体确实支持不同权重，然后它是由浏览器尽可能准确，因为它可以显示它; otherwise it tries to fall back gracefully to the nearest that's supported. 否则，它将尝试适当地回退到支持的最接近距离。