将字体类型应用于特定的 html 符号实体 (™)答案

【问题标题】：Apply font-type to specific html symbol entity (™)将字体类型应用于特定的 html 符号实体 (™)
【发布时间】：2018-04-01 03:53:23
【问题描述】：

我正在使用一个 wordpress 主题，该主题具有用于页面标题和内容正文的字体类型选择。我使用蒙特塞拉特作为标题，使用 Open-Sans 作为正文。

我有一些产品名称需要输入商标符号 ™ / &trade;

但标题中的商标符号正在以一种完全不同的字体出现，看起来像 Times New Roman。

有没有办法仅将字体类型应用于&trade; 商标 html 符号实体？全球范围内？

我尝试在标题中使用<sub>TM</sub>，但它并不适用于所有地方，例如它不适用于面包屑。

【问题讨论】：

不，您不能在部分文本上使用 CSS（除了特殊例外，例如 f.e. :first-letter）。如果您希望能够对其应用 CSS 格式，则需要将其包装在自己的 HTML 元素中。
Montserrat 没有 ™ 的字形，因此浏览器必须使用不同的字体来呈现它。 fonts.google.com/specimen/Montserrat 如果您有另一个 Web 字体，您希望在其中显示字符，而无需操作 HTML，那么您应该寻求诸如 stackoverflow.com/questions/11395584/… 之类的解决方案，并将包含该字形的字体添加到您的字体中堆栈。
我明白了，这回答了我猜想的问题，谢谢..

标签： html css wordpress

【解决方案1】：

是的，你可以……但这不是很方便：

@font-face 规则有一个 unicode-range 属性，您可以将其设置为针对单个字符：

c.onchange = e=&gt; document.body.classList.toggle('amp');

@font-face {
  font-family: 'Ampersand';
  src: local('Courier');
  unicode-range: U+26;
}

body.amp{
  font-family: Ampersand, cursive;
  }
body{
  font-family: cursive;
  }

<span>lorem ipsum dolor sit amer &amp; some others</span>
<input type="checkbox" id="c">

但正如我所说，这并不是很方便，因为您必须将它设为您希望它应用的所有字体系列声明中的第一种字体...

【讨论】：

【解决方案2】：

通常会为这些使用不同的标记，然后使用 CSS 生成内容。例如，而不是

MyCompany&trade;

你可能会使用

MyCompany<i class="symbol symbol-tm" />

然后使用 CSS

i.symbol {
    position: relative;
    width: 1.5em;
}

i.symbol.symbol-tm:after {
    display: inline;
    content: "\2122";
    font-family: "Times New Roman";
}

【讨论】：