Письмо внутри квадрата

Question

Я хотел бы создать текст вроде:

Мой вопрос, как я могу создать его с помощью CSS?
Ближайший файлик был Юникода с кругами:
①②③

Answer 1

Start просто создать что-то вроде 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 до/после selectors- See this example.

Answer 2

На мой взгляд, используя интервал лучше, чем при использовании пользовательских шрифтов по двум причинам

1. поддержки во всех браузерах - Многие браузеры не являются support custom font
2. Это одна дополнительная загрузка ресурсов (файл шрифта) для браузера, чтобы она повлияла на производительность и способствовала общему времени загрузки страницы.

Answer 3

Конечно, вы всегда можете стилизовать каждую букву по-разному путем присвоения классов по отдельности и применяя некоторую специфику, но это может быть больше работы, чем это стоит, и очень трудно поддерживать , Я бы порекомендовал lettering.js, и вы можете найти его в Github для бесплатной загрузки.

вот несколько ссылок, чтобы вы начали.

Ahandling Web Typograhy

Lettering.js

lettering.js download on GitHub