【发布时间】：2019-07-26 06:26:44
【问题描述】：
我一直在尝试一些方法来使用 CSS 为字体粗细创建更好的控制。我们在 IE、Edge、Chrome、Safari、Opera 和 Firefox 中运行以下操作系统/设备要求。只需要现代浏览器，不需要旧的东西。
操作系统支持/设备要求
现代浏览器：适用于 PC/笔记本电脑的 Windows、MAC、iOS、Android、Linux 移动设备：iPhone 4+、三星 S2+、iPad 平板电脑、三星平板电脑、Windows 平板电脑
总结
我已经包含了一个包含三个不同测试用例的工作示例。 first 测试用例过于模糊，尤其是在 IE/Edge 中。它在某些操作系统/设备/浏览器上不太模糊，但不够统一，无法满足我们的需求。它使用text-shadow: 1px 1px #999; 设置粗体。
第二个测试用例在所有设备/操作系统/浏览器上的外观最为统一，但呈现出一些模糊性。它使用text-shadow: 1px 0.1px rgba(0, 0, 0, 0.35); 来实现更精细的粗体分辨率。
第三个测试用例对于我们的用例来说太粗了。它使用color: #000;font-weight: 600; 设置粗体。我尝试了较浅的颜色，但仍然留下较粗的字符，这是我们不想要的。
有人知道解决这个问题的更好方法吗？
更新
我选择的答案指向了具有所需半色调字体粗细的字体样式，这是我在原始问题中要求的更好方法。
我最初的问题没有充分说明我现在在此处添加的两个主要目标。
所需功能：
- 类似于 Arial 的字体粗细，介于网络安全 Arial 字体中的字体粗细之间。
- 一种在不增加正常文本间距和不使用不同颜色的情况下突出显示某些文本的方法。
上述第 1 项已通过此问题的答案得到解决。通过切换到类似于 Arial 的 Google 字体，实现了所需的半色调。此外，我们的用户对新基本字体的反馈都是积极的。更清晰、更易于阅读、不那么皱巴巴等。大约 17K 的下载非常值得。
原始问题的 cmets 是正确的。文本阴影功能不能用于使用 CSS 创建字体粗细。为什么？
- 字体粗细通常用于创建一组可缩放字体，这些字体的字体粗细随着字体粗细数字的增加而增加，即 500、600、700 等。关键字是可缩放的。字体粗细 500 和 600 会随着字体大小的增加而保持其纵横比。
下图说明了字体粗细的可伸缩性。
- Text-shadow 为给定字体添加了固定的文本效果。随着字体大小的增加，阴影效果会减弱。例如，对于 50 像素或 70 像素的字体大小，肉眼可能看不到 16 像素文本字体的细微文本效果。这里的关键点是 文本阴影不会随着字体大小的增加而线性缩放。
下图说明了 CSS 中 box shadow 和 text-shadow 的固定性质。最小的盒子被它的阴影相形见绌，而最大的盒子上的阴影效果相对于元素大小来说是很小的。
我将为这个问题添加另一个答案，试图解决我的更新要求并包含我的特定解决方案的详细信息。
感谢大家的帮助和反馈。
body {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 15px;
font-style: normal;
font-variant: normal;
text-transform: none;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
color: #383838;
width: 100%;
height: 100%;
-webkit-text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-moz-text-size-adjust: none !important;
border: none;
text-align: center;
text-rendering: optimizelegibility;
min-width: 300px !important;
}
h3,
h4,
h5,
h6 {
display: block;
font-family: inherit;
line-height: 1.1;
color: #000;
opacity: 1.0;
font-weight: normal;
text-align: center;
margin: 10px auto 6px auto;
font-size: 1em;
}
h3 {
font-size: 1.05em;
}
h4 {
font-size: 1.1em;
}
h5 {}
h6 {
margin: .25em auto;
}
.center-block {
display: block;
width: auto;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.test-boldness {
text-shadow: 1px 0.1px rgba(0, 0, 0, 0.23);
}
.bold {
font-weight: 500;
color: #000;
}
.bolder {
font-weight: 500;
color: #000;
text-shadow: 1px 0.1px rgba(0, 0, 0, 0.35);
}
.boldest {
color: #000;
font-weight: 600;
}
.test-boldness {
text-shadow: 1px 0.1px rgba(0, 0, 0, 0.35);
}
.test-boldness-1pxsolid {
text-shadow: 1px 1px #999;
}
div {
font-family: inherit;
color: #383838;
}<!DOCTYPE html>
<head></head>
<html>
<body>
<br />
<br />
<div class="center-block"><span class="test-boldness-1pxsolid">How Used: </span>Visible accent. This one has most blurring on all required OS/devices.</div>
<br />
<div>
<span style='font-weight: 300'>300</span>
<span style='font-weight: 400'>400</span>
<span style='font-weight: 500'>500</span>
<span class='test-boldness'>Custom 550</span>
<span style='font-weight: 600'>600</span>
<span style='font-weight: 700'>700</span>
<br />
<br />
<div class="center-block"><span class="test-boldness">How Used: </span>Visible accent. Less blurring/most uniform on required OS/devices. Is there a better way to do this?</div>
<br />
<br />
<div class="center-block"><span class="boldest">How Used: </span>Visible accent. This one is clearest but too bold, especially on some of the required OS/devices.</div>
<br />
<h3>Test Cases</h3>
<br />
<h3 class="test-boldness-1pxsolid">TEST ABCDKTM test abcdktm-1pxsolid</h3>
<h3 class="test-boldness">TEST ABCDKTM test abcdktm 0.1px Op LT 1</h3>
<h3>TEST ABCDKTM test abcdktm</h3>
<h4 class="test-boldness-1pxsolid">TEST ABCDKTM test abcdktm-1pxsolid</h4>
<h4 class="test-boldness">TEST ABCDKTM test abcdktm 0.1px Op LT 1</h4>
<h4>TEST ABCDKTM test abcdktm</h4>
<h5 class="test-boldness-1pxsolid">TEST ABCDKTM test abcdktm-1pxsolid</h5>
<h5 class="test-boldness">TEST ABCDKTM test abcdktm 0.1px Op LT 1</h5>
<h5>TEST ABCDKTM test abcdktm</h5>
<h6 class="test-boldness-1pxsolid">TEST ABCDKTM test abcdktm-1pxsolid</h6>
<h6 class="test-boldness">TEST ABCDKTM test abcdktm 0.1px Op LT 1</h6>
<h6>TEST ABCDKTM test abcdktm</h6>
<div class="center-block bold test-boldness">TEST ABCDKTM test abcdktm 0.1px Op LT 1</div>
<div class="center-block bold">TEST ABCDKTM test abcdktm</div>
<div class="center-block bolder test-boldness">TEST ABCDKTM test abcdktm font-weight: 500</div>
<div class="center-block bolder">TEST ABCDKTM test abcdktm font-weight: 500</div>
<div class="center-block boldest">TEST ABCDKTM test abcdktm font-weight: 600</div>
<div class="center-block boldest">TEST ABCDKTM test abcdktm font-weight: 600</div>
</body>
</html>【问题讨论】：
-
网络不是印刷媒体。你没有得到同样精细的控制。如果您的浏览器/字体不支持不同的字体粗细，那就没有什么可做的了。
-
@Cody 感谢您抽出宝贵时间回复。我知道 Windows 应用程序与 Web 应用程序之间的区别。我也做了很多 C、C++、C# 开发。开箱即用的 Web 浏览器字体权重不会这样做。但是，我认为您所做的声明在技术上是不准确的，即如果浏览器不支持不同的字体粗细，就没有什么可做的了。查看我更新的代码，300 400 500 自定义（见案例 2）600 700。这确实弥合了 FW 500 和 600 之间的差距。我的问题不是是否可以做某事，它可以。问题是：如何做得更好（不那么模糊）。再次感谢。
-
通过添加阴影来模拟粗体是一种反模式。除了它非常模糊（并且不可避免地会，考虑到你是如何实现它的）这一事实之外，它并没有传达与“粗体”相同的语义。通过寻找一种实现您想要的权重的字体，然后在您的网站上使用该字体而不是标准（有限）网络安全字体之一，您会得到更好的服务。
-
您可能正在为大多数浏览器不像设计程序那样抗锯齿这一事实而苦苦挣扎，因此您的字体粗细并不完全符合您的期望（浏览器呈现更粗的方式是我会描述它）。看看这篇文章。我敢打赌，如果您抗锯齿，您可以获得您希望的重量（您在图形设计程序中看到的重量）。 devhints.io/css-antialias
-
@Cody Gray 有什么具体原因您不考虑导入相关的
font-family来解决问题吗？