广场内的信

Question

我想创建一个这样的文字：

我的问题是，如何使用CSS创建它？ 我发现的最接近的解决方案是带圆圈的unicode：
①②③

Answer 1

首先简单地创建下面的HTML和CSS：

<强> HTML

<ul>
    <li> <a href="#">1</a> </li>
    <li> <a href="#">2</a> </li>
    <li> <a href="#">3</a> </li>
    <li> <a href="#">4</a> </li>
</ul>

<强> CSS

li {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    border: solid 1px #888;
    line-height: 25px;
}
li a {
    display: block;
}

See example here

在选择器之前/之后使用CSS添加数字 - See this example.

Answer 2

在我看来，使用跨度比使用自定义字体要好，原因有两个

1. 支持所有浏览器 - 许多浏览器都没有support custom font
2. 这是浏览器的一个额外资源下载（字体文件），因此它会影响性能并影响整个页面加载时间。

Answer 3

当然，你总是可以通过单独分配类并应用一些特殊性来区分每个字母的样式，但这可能比它的价值更高，而且很难维护。我推荐letters.js你可以在Github找到它免费下载。

这里有一些链接可以帮助您入门。

Ahandling Web Typograhy

Lettering.js

lettering.js download on GitHub