html - 如何在 Stackoverflow 编辑器页面中创建像 ► 这样的字符？

Question

我查了这张图的源代码，就像这样:

<p><span class="dingus">►</span> put returns between paragraphs</p>

然后我将 ► 字符复制到我的网站中。它看起来像这样:

如你所见，原来更宽了？如何制作像 Stackoverflow 这样的 Angular 色？

Answer 1

如果您的站点使用支持完整 Unicode 目录的文本编码(例如 UTF-8)并且您的编辑器也支持它，则您只需复制并粘贴该符号即可。它只是文本。在 2017 年，没有理由不使用 UTF-8。

您看到该 Angular 色的事实表明它适合您。但是，您需要了解它不是图片，它的外观完全由字体和其他 CSS 样式决定，就像任何其他字母一样:

div{
    font-size: 10pt;
}
.a{
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}
.b{
    color: orange;
    font-size: 15pt;
    text-shadow: 1px 2px 3px pink;
}

<div>►</div>
<div class="a">►</div>
<div class="b">►</div>

大多数系统字体甚至没有字符的字形，浏览器将默认为某些内置字符，但如果您碰巧使用自定义字体，您可以选择特定的表示形式。

如果它是一个不使用 Unicode 的遗留站点，HTML 实体可以提供帮助。除其他外，它们是一种插入无法在文档使用的字符编码中表示的字符的机制。在这种情况下，the ► character是 U+25B6 又名 BLACK RIGHT-POINTING POINTER所以你可以使用它的 Unicode 代码点:

▶