Question

我尝试使用<em>标签和font-style: italic，同时尝试®和®都没有成功。

我知道的一种“解决方法”是使用外部符号库，例如Font Awesome中的<i class="far fa-registered"></i>，但希望不必加载任何外部源。

是否完全可以将文本符号斜体化？

Answer 1

您可以偏斜地近似¹：

.italic span {
  display: inline-block;
  transform: skewX(-15deg);
}
.italic {
 font-style:italic;
}

<div><span>&reg;</span> some text</div>

<div class="italic"><span>&reg;</span> some text</div>

^{1：如@Bailey Parker所评论，某些字体可能包含®的斜体版本。在这种情况下，不需要任何解决方法。}

Answer 2

请确保该字体具有您在此处使用的斜体版本。.因此它可以工作。如果您使用的是Google字体，则也要在其中加载斜体。

Answer 3

正如@TemaniAfif指出的，您可以解决此问题。但是，您的根本问题很可能是您使用的字体系列没有斜体的®标志符号。如果您查看计算机上的字体，则会看到每种字体的多个版本：“ Arial常规”，“ Arial斜体”，“ Arial粗体”，“ Arial粗体斜体”。当您执行font-style: italic时，实际上只是在切换为使用“ Arial Italic”字体。如果然后添加font-weight: bold，则切换到“ Arial Bold Italic”。如果使用字体检查器打开每种字体，然后查看这些字形，则会注意到所有这些字体都包含每个字形的单独条目（字母，数字，符号等）。因此，“ Arial Regular”有一个“ a”字形，“ Arial Italic”也有。在我的计算机上尝试使用Arial Italic似乎没有®字形。我相信当字体缺少字形时，它会退回到该字体的“常规”版本，如果没有字形，它将使用包含这些符号的系统字体。如果我们同时尝试Arial和Helvetica，则可以看到此行为。 Arial没有®斜体字形，但是Helvetica有。 Times（Times New Roman的macOS版本）也似乎带有斜体®字形。

div {
    font-style: italic;
}

<div style="font-family: Arial;">&reg; 2019 The quick brown fox (Arial)</div>
<div style="font-family: Helvetica;">&reg; 2019 The quick brown fox (Helvetica)</div>
<div style="font-family: Times;">&reg; 2019 The quick brown fox (Times, macOS only)</div>

因此，真正的解决方案是确保您使用的字体家族带有斜体®字形。如果您喜欢的字体没有字体，您可以尝试使用FontForge之类的工具制作字体。

如何用html斜体显示®符号？

3 个答案: