按字符 class 更改 CSS 中的样式

Question

我正在尝试本地化一个网站，我想调整 HTML 的一个块，这样我就可以只在消息资源中存储文本（无格式）

View <b>11</b> new out of <b>11</b> message(s) in your inbox

我想做的是以某种方式 CSS 将数字呈现为粗体，而无需在消息包中明确放入标签。

是否可以在没有 JavaScript 的情况下使用 Chrome、Firefox、Safari 或 Edge？

Answer 1

要使数字加粗，您可以使用正则表达式替换并检测数字，然后添加加粗标记，如 以下代码：

抱歉，我现在注意到您不想使用 jquery，我不确定仅使用 css 是否可行。

$('#block').html(function(i, c) {
  return c.replace(/\d+/g, function(v) {
    return "<b>" + v + "</b>";
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block">
  View 11 new out of 11 message(s) in your inbox
</div>

Answer 2

如果您有两种不同的字体可以使用，那么不用 JavaScript 也是可以的。您使用 unicode-range 挑选数字，如下所示：（未在 Safari 中测试，但在其他情况下工作正常）

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  src: local('Archivo Regular'), local('Archivo-Regular'), url(https://fonts.gstatic.com/s/archivo/v6/k3kQo8UDI-1M0wlSfdfoLnnA.woff2) format('woff2');
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: local('Archivo Black Regular'), local('ArchivoBlack-Regular'), url(https://fonts.gstatic.com/s/archivoblack/v9/HTxqL289NzCGg4MzN6KJ7eW6CYyF_g.woff2) format('woff2');
  unicode-range: U+30-39;
}

div {
  font-size: 2em;
  font-family: 'Archivo Black', 'Archivo', sans-serif; 
}

<div>View 11 new out of 11 message(s) in your inbox</div>

按字符 class 更改 CSS 中的样式

Change style in CSS by character class

css

internationalization