Question

我一直在尝试一些方法来使用CSS为字体粗细创建更好的控件。我们在IE，Edge，Chrome，Safari，Opera和Firefox中运行以下OS /设备要求。只需要现代的浏览器，不需要老的东西。

操作系统支持/设备要求

现代浏览器：适用于PC /笔记本电脑的Windows，MAC，iOS，Android，Linux 移动设备：iPhone 4+，三星S2 +，iPad平板电脑，三星平板电脑，Windows平板电脑

摘要

我提供了一个包含三个不同测试用例的工作示例。第一测试用例太模糊，尤其是在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字体中。
一种突出显示某些文本而不增加正常文本间距且不使用不同颜色的方法。

对该问题的回答

上面的数字。通过切换到类似于Arial的Google字体，可以实现所需的半色调。此外，我们的用户对新基本字体的反馈都是正面的。更清晰，更易于阅读，不那么费力等。〜17K的下载非常值得。

对原始问题的评论是正确的。文本阴影功能不能用于使用CSS创建字体粗细。为什么？

字体权重通常用于创建一组可缩放字体，这些字体的字体粗细随字体权重数字（即500、600、700等）的增加而增加。关键字是可缩放的。字体粗细500和600随着字体大小的增加而保持其纵横比。

下图说明了字体粗细的可伸缩性。

文本阴影将固定的文本效果添加到给定的字体。随着字体大小的增加，阴影效果会减弱。例如，对于50像素或70像素的字体大小，肉眼无法看到16像素文本字体的微妙文字效果。这里的主要要点是，随着字体大小的增加，文本阴影不会线性缩放。

下图说明了CSS中框阴影和文本阴影的固定性质。最小的盒子的阴影使它相形见,，而相对于元素大小，最大盒子上的阴影效果却很小。

我将为这个问题添加另一个答案，以尝试解决我的更新要求并包括我的特定解决方案的详细信息。

我感谢大家的帮助和反馈。

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>

Answer 1

CSS提供的Array.prototype.length值种类比您想象的要广泛得多。 Mozilla's CSS font-weight页甚至列出了我不知道的重量值。 shock！值的范围是1-1000，通常以100为间隔增加，但有一些偏差。这可能不是一个完美的解决方案，但您可能会发现一些自己没有意识到的选择。

Answer 2

什么是令人开心的

字体现在的工作方式是，字体具有可以使用的各种字体粗细。要使用字体粗细，它们需要在用户浏览器中可用。浏览器通常没有安装支持9种典型字体粗细（100、200、300、400、500、600、700、800、900）的字体。它将向上或向下舍入到最接近的一个。

您可以做什么

您可以尝试找到支持所需所有字体粗细的字体并将其导入。我在Google字体上找到了一些字体：https://fonts.google.com/?stylecount=18。

修改后的代码

我所做的只是将“蒙特塞拉特”导入到您的代码中，然后将蒙特塞拉特字体分配给您的身体。

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');

body {
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  font-size: 15px;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  font-synthesis: none;
  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>

额外阅读

Answer 3

我对扩展要求的回答

我想为其他试图解决我在原始问题中提到的一个或两个问题的人记录我们的方法。

正如其他人已经指出的那样，您无法使用CSS文本阴影来实现中等字体粗细。如果您尝试使用 JavaScript 和CSS模拟字体粗细（确实是个坏主意），那将非常复杂，并且您将永远无法获得字体粗细功能提供的良好的跨平台统一性。 / p>

侧面说明：请注意JavaScript单词的Stack Overflow字体粗体。在Firefox中，字体宽度和高度明显更大，这就是我现在使用的字体。这是更改嵌入式文本的字体粗细的正常副作用。

问题1.缺少字体粗细（较少的粗体增量）

以下内容说明了我们一直试图解决的两个问题之一。第一个示例使用网络安全字体。第二种使用Open-Sans获得所需的半色调字体粗细。 这解决了我们的第一个问题。不，我不大喊。根本无法在 SO 上添加微妙的文字效果，并且不需要。 Here is a good link with font images。该文档使我选择了Open Sans字体。

第一个加粗字体是我们使用的网络安全字体的唯一选择。第二个是我们从Google下载的Open Sans字体。粘贴的图像不会正确显示字体。如果运行代码段，您将看到它的真实外观。

从上面，您可以使用Web安全Arial字体家族观察粗体字体的粗细如何影响文本。 Open Sans字体更像我们想要的字体。但是，如果要向一个单词或一组单词添加行内强调，则在500和600字体粗细之间切换会导致字体高度显着增加和字体加粗。从美学的角度来看，这在MHO中并不是最佳解决方案。

问题2。细微的文字口音（比不更改文字宽度或高度的下一个字体粗细的粗体要小）

首先，使用文本阴影效果比较上面两个表的更细微的版本（如下）。

如果运行该代码段并使用+键放大一个或两个级别，则仍然可以识别文字重音。

由于文本阴影不会影响元素的宽度或高度，因此下表要小一些（请参见下面的W3.org注意）。文字阴影可能会侵犯相邻的字符，这可能是不好的，也可能是好的，这取决于设计者的意图。 顺便说一句，我们的用户100％的时间选择了第二组突出显示的表格字体。他们说他们看起来更清晰，更清洁，更锐利，不那么浓密等等。

从W3.org：

与框阴影不同，文本阴影不会被裁剪为阴影形状，如果文本是部分透明的，则可能会显示出来。
就像框阴影一样，文本阴影不会影响布局，也不会触发滚动或增加可滚动区域的大小。

看看下面的段落。它包含在代码片段中。选择一组比相邻文本更粗略高一点的突出显示的单词是很容易的。如果运行该代码段，您会注意到字体比下面的复制图像更清晰。我们的用户非常喜欢对嵌入式文本和表格使用更精细的文本突出显示。

对于要重音的单词，我们一直使用较暗的文字颜色。对于较大的字体，我们的用户说这是“足够的”，但“不是很好”。他们的抱怨是，对于较小的字体大小，色差实际上并不明显。

问题在于黑色的＃000字体会随着字体大小变小而变成浅灰色（请参见下图），这是我们无法更改的字体渲染问题。这是我们的第二期。

当我们添加一个小的/水平的亚像素文本阴影时，我们能够解决这个问题，我们对此感到满意。即使字体大小增加（例如14像素到28像素），我们也可以实现相对清晰，粗体的文字重音。至少可以说，我们的用户对新字体和文字阴影突出显示效果的视觉改进感到不快。

您可以通过在不同的OS，设备和浏览器上运行示例来自行判断。我们只是对我们的用户这样做。我们让他们通过对相同和不同操作系统上的设备（移动/ PC）进行并排比较来确定自己的偏好。

注意事项

文本阴影需要进行一些实验。文本粗细就可以了。
未创建所有浏览器，操作系统和硬件文本呈现。期望可变性。
当字体大小增加时，预计文本突出显示效果将减小。
如果您可以将最暗的色调用于文字强调，则仍然可以在大得多的字体上看到色调的差异，这提供了正常降级的途径。

以下12行文本分为两组。

第6行的第一组在左栏中反映了默认的Open Sans 600字体，并且对600字体的粗细应用了带重音的文字在右列中。

第6行的第二组在左栏中反映了默认的Open Sans 500字体，并且对500字体的粗细应用了带重音的文字在右列中。

同样，如果您运行代码段，则将在复制/粘贴上看到更好的质量结果。

堆栈溢出问题here也解决了我们的第二个问题。该解决方案是我找到的最简单的解决方案，但是对于文本阴影，它给出的模糊结果超过0.3px：0 0 0.3px;

<div>Testing 123: </div>
<div style="text-shadow: 0 0 .2px">Testing 123: </div>
<div style="text-shadow: 0 0 .4px">Testing 123: </div>
<div style="text-shadow: 0 0 .6px">Testing 123: </div>
<div style="text-shadow: 0 0 .8px">Testing 123: </div>
<div style="text-shadow: 0 0 1px">Testing 123: </div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
body {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', 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;
  color: rgba(0, 0, 0, .83);
  text-align: center;
  margin: 10px auto 6px auto;
  font-size: 1em;
  font-weight: 500;
}

h3 {
  font-weight: 500;
  font-size: 1em;
  color: rgba(0, 0, 0, 0.9);
  text-shadow: 0.45px 0 0 rgba(0, 0, 0, 0.9);
}

h4 {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: 0.1px 0 0 rgba(0, 0, 0, 0.9);
  text-shadow: 0.3px 0 0 rgba(0, 0, 0, 0.9);
  font-size: 1em;
}

h5,
.darker-font {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: 0.08px 0 0 rgba(0, 0, 0, 0.9);
  font-size: 1em;
}

.center-block {
  display: block;
  width: auto;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.margintb-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.column0,
.column1,
.column2,
.column3,
.column-w {
  display: table-column;
  width: auto;
  align-content: center;
}

.table-r {
  display: table;
  border: 1px solid #606060;
  margin: auto;
  align-content: center;
  background: #fff;
}

.row-r {
  display: table-row;
}

.cell-r-center,
.cell-r-left,
.cell-r-right,
.cell-r-center-border,
.cell-r-left-border,
.cell-r-right-border {
  display: table-cell;
  text-align: center;
  padding: 4px;
  white-space: nowrap;
}

.cell-r-left,
.cell-r-left-border {
  text-align: left;
}

.cell-r-right,
.cell-r-right-border {
  text-align: right;
}

.cell-r-center-border,
.cell-r-left-border,
.cell-r-right-border {
  border-top: 1px solid #606060;
}

div {
  font-family: inherit;
  color: #333;
  text-align: left;
}

.inline-block {
  vertical-align: middle;
  display: inline-block;
}

.shadow-text-bold,
.shadow-text-bolder,
.shadow-text-boldest {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.84);
  text-shadow: 0.15px 0.15px 0.1px rgba(0, 0, 0, 0.84)
}

.shadow-text-bolder {
  text-shadow: 0.3px 0.3px 0.1px rgba(0, 0, 0, 0.84)
}

.shadow-text-boldest {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: 0.08px 0 0 rgba(0, 0, 0, 0.9);
}

<!DOCTYPE html>

<head></head>
<html>

<body>
  <br />
  <div>The first two tables apply default font-weights of 500 and 600 to achieve text highlighting betweeen column headings and table content.</div>
  <div class="center-block">
    <div style="font-family: Arial, Helvetica, sans-serif;">
      <div class="center-block margintb-8" style="font-weight: 600; color: #000">Subscriptions Arial Web Safe</div>
      <div class="center-block">
        <div class="text-container-light-overflow-container">
          <div class="table-r">
            <div class='column0'></div>
            <div class='column-w'></div>
            <div class='column-w'></div>
            <div class='row-r'>
              <div class='cell-r-center' style="font-weight: 600">#</div>
              <div class='cell-r-center' style="font-weight: 600">Expiration</div>
              <div class='cell-r-center' style="font-weight: 600">Available</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border cell-40'> 1 </div>
              <div class='cell-r-center-border cell-100'>07/01/2027</div>
              <div class='cell-r-center-border cell-100'> $1927.90</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border cell-40'> 2 </div>
              <div class='cell-r-center-border cell-100'>07/01/2027</div>
              <div class='cell-r-center-border cell-100'> $1400.00</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border'> </div>
              <div class='cell-r-center-border'>--------</div>
              <div class='cell-r-center-border' style="font-weight: 600"> $2327.90</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="font-family: 'Open Sans';">
      <div class="center-block margintb-8" style="font-weight: 600; color: #000">Subscriptions Open Sans</div>
      <div class="center-block">
        <div class="text-container-light-overflow-container">
          <div class="table-r">
            <div class='column0'></div>
            <div class='column-w'></div>
            <div class='column-w'></div>
            <div class='row-r'>
              <div class='cell-r-center' style="font-weight: 600">#</div>
              <div class='cell-r-center' style="font-weight: 600">Expiration</div>
              <div class='cell-r-center' style="font-weight: 600">Available</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border cell-40'> 1 </div>
              <div class='cell-r-center-border cell-100'>07/01/2027</div>
              <div class='cell-r-center-border cell-100'> $1927.90</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border cell-40'> 2 </div>
              <div class='cell-r-center-border cell-100'>07/01/2027</div>
              <div class='cell-r-center-border cell-100'> $1400.00</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border'> </div>
              <div class='cell-r-center-border'>--------</div>
              <div class='cell-r-center-border' style="font-weight: 600"> $2327.90</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br />
    <div style="font-family: 'Open Sans';">
      <span>The</span>
      <span class="shadow-text-boldest">second two tables</span><span> apply default font-weight of 500 and subtle text-shadowing to achieve text highlighting betweeen column headings and table content. There are also</span>
      <span class="shadow-text-boldest">three examples</span><span> of inline text highlighting in this paragraph to enhance content without screaming or altering the base text-font width, which is a <span class="shadow-text-boldest">real plus at times</span>.
      Just remember that the text-shadow effect will diminish as the font-size is increased and can cause <span style="font-weight: 600">unwanted destortions</span> when the font-size is made <span class="shadow-text-boldest" style="font-size: 6px; font-weight: 600;">very small.</span></span>.
      Notice the second from last "unwanted destortions" text. It is the Open Sans font at 600 font-weight. It is noticeably higher and thicker than the adjacent text. Compare to the text-shadow versions earlier in the paragraph.
    </div>
    <div style="font-family: Arial, Helvetica, sans-serif;">
      <div class="center-block shadow-text-bold margintb-8">Subscriptions Arial Web Safe</div>
      <div class="center-block">
        <div class="text-container-light-overflow-container">
          <div class="table-r">
            <div class='column0'></div>
            <div class='column-w'></div>
            <div class='column-w'></div>
            <div class='row-r'>
              <div class='cell-r-center shadow-text-bold'>#</div>
              <div class='cell-r-center shadow-text-bold'>Expiration</div>
              <div class='cell-r-center shadow-text-bold'>Available</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border cell-40'> 1 </div>
              <div class='cell-r-center-border cell-100'>07/01/2027</div>
              <div class='cell-r-center-border cell-100'> $1927.90</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border cell-40'> 2 </div>
              <div class='cell-r-center-border cell-100'>07/01/2027</div>
              <div class='cell-r-center-border cell-100'> $1400.00</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border'> </div>
              <div class='cell-r-center-border'>--------</div>
              <div class='cell-r-center-border shadow-text-bold'> $2327.90</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="font-family: 'Open Sans';">
      <div class="center-block shadow-text-bold margintb-8">Subscriptions Open Sans</div>
      <div class="center-block">
        <div class="text-container-light-overflow-container">
          <div class="table-r">
            <div class='column0'></div>
            <div class='column-w'></div>
            <div class='column-w'></div>
            <div class='row-r'>
              <div class='cell-r-center shadow-text-bold'>#</div>
              <div class='cell-r-center shadow-text-bold'>Expiration</div>
              <div class='cell-r-center shadow-text-bold'>Available</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border cell-40'> 1 </div>
              <div class='cell-r-center-border cell-100'>07/01/2027</div>
              <div class='cell-r-center-border cell-100'> $1927.90</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border cell-40'> 2 </div>
              <div class='cell-r-center-border cell-100'>07/01/2027</div>
              <div class='cell-r-center-border cell-100'> $1400.00</div>
            </div>
            <div class='row-r'>
              <div class='cell-r-center-border'> </div>
              <div class='cell-r-center-border'>--------</div>
              <div class='cell-r-center-border shadow-text-bold'> $2327.90</div>
            </div>
          </div>
        </div>
      </div>
      <div class="center-block">
        <div class="center-block margint-16" style="font-weight: 600; color: rgba(0, 0, 0, 0.9);">
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0.65px 0 0 rgba(0, 0, 0, 0.9)">Testing 123</span>
          </div>
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0.55px 0 0 rgba(0, 0, 0, 0.9)">Testing 123</span>
          </div>
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0.45px 0 0 rgba(0, 0, 0, 0.9)">Testing 123</span>
          </div>
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0.3px 0 0 rgba(0, 0, 0, 0.9)">Testing 123</span>
          </div>
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0.08px 0 0 rgba(0, 0, 0, 0.9)">Testing 123</span>
          </div>
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0 0">Testing 123</span>
          </div>
        </div>
        <div class="center-block" style="color: rgba(0, 0, 0, 0.9)">
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0.65px 0 0 rgba(0, 0, 0, 0.9)">Testing 123</span>
          </div>
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0.55px 0 0 rgba(0, 0, 0, 0.9)">Testing 123</span>
          </div>
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0.45px 0 0 rgba(0, 0, 0, 0.9)">Testing 123</span>
          </div>
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0.3px 0 0 rgba(0, 0, 0, 0.9)">Testing 123</span>
          </div>
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0.08px 0 0 rgba(0, 0, 0, 0.9)">Testing 123</span>
          </div>
          <div>
            <span class="inline-block">Testing 123: </span><span class="inline-block" style="text-shadow: 0 0 rgba(0, 0, 0, 0.0);">Testing 123</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 4

我没有阅读问题或答案，因为它们都太长了，但是我添加了它是为了解决别人的问题。

就我而言，我可以使用-webkit-text-strike-width很好地控制文本粗体。

通过CSS更好地控制文字重音/粗体

4 个答案: