Изменить стиль в 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

Можно обойтись без JavaScript, если у вас есть два разных шрифта, которые вы можете использовать. Вы выбираете цифры, используя диапазон Unicode, например: (Не проверено в 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>

Answer 2

Чтобы сделать числа полужирными, вы можете использовать регулярное выражение заменить и определить числа, а затем добавить полужирные теги, такие как следующий код:

$('#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>