Как я могу горизонтально центрировать букву в CSS, игнорируя кернинг (учитывая только края глифов)?

Я очень сомневаюсь, что это возможно, но я хотел бы центрировать одну букву (внутри круга), учитывая только горизонтальные края глифа.

В частности, заглавная буква J в Droid Sans кернена таким образом, что вертикальная черта располагается по центру, но хвост вытянут влево. Например. если вы выберете букву, хвост покинет окружающее поле.

Я перепробовал все свойства/значения CSS, которые смог найти, включая font-kerning и другие черновики CSS3, селектор ::first-letter и т. д. в Chrome и Firefox.

div {
  font-family: "Droid Sans";
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 40px;
  line-height: 50px;
  text-align: center;
  background: #ddd;
}
div + div {
  font-family: Arial
}
<head>
  <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
</head>
Droid Sans:
<div>J</div>
Arial (desired centering):
<div>J</div>


fonts css glyph kerning
person Steve Clay    schedule 21.09.2016    source источник
comment
а твой код есть?   -  person dippas    schedule 21.09.2016
comment
Будет очень полезно, если вы сделаете (jsfiddle)[jsfiddle.net]   -  person smalinux    schedule 21.09.2016
comment
Возможно, вам придется вернуться к использованию растрового изображения/gif/jpg того, что вы хотите увидеть.   -  person Steve Wellens    schedule 21.09.2016
comment
Если то, что вы просите сделать, это заставить шрифт переменной ширины вести себя как моноширинный шрифт только с CSS, то нет. Хотя есть несколько JS-проектов, которые нацелены на это.   -  person Robert Wade    schedule 21.09.2016
comment
@dippas демонстрация Проверьте ::selection.   -  person Ricky    schedule 21.09.2016
comment
Я добавил фрагмент. @RicardoRuiz Я сомневаюсь, что flex-центрирование исправит это.   -  person Steve Clay    schedule 21.09.2016
comment
У всех шрифтов есть свои особенности (читай размеры глифов), они разработаны специально для каждого, и все они требуют ручного прикосновения, как в этом случае, поскольку вы не можете читать шрифт (на практике) где фактическая буква расположена внутри.   -  person Ason    schedule 21.09.2016
comment
@SteveClay Я просто предоставил демонстрацию, а не решение.   -  person Ricky    schedule 21.09.2016
comment
В вопросе я пояснил, что искал общее решение, поэтому мне не нужно вручную вычислять смещения для каждого символа.   -  person Steve Clay    schedule 21.09.2016
comment
С уважением, см. Если бы этот вопрос действительно заключался в том, как расположить букву немного левее, его бы закрыли из-за миллиона дубликатов или дали бы простой ответ. Я бы предпочел удалить Q.   -  person Steve Clay    schedule 21.09.2016
comment
@LGSon Вы действительно думаете, что из исходного вопроса разумно, что я не знал о letter-spacing, или position: relative, или text-indent, или, может быть, о десятках других способов жестко запрограммировать смещение? Мое редактирование не имело целью лишить вас кармы.   -  person Steve Clay    schedule 21.09.2016
comment
Конечно, их можно удалить   -  person Steve Clay    schedule 21.09.2016
comment
Добавление дополнения противоречит политике? Без уточнения я не вижу, как это добавляет какую-либо ценность для сообщества.   -  person Steve Clay    schedule 22.09.2016
comment
Если это аннулирует уже данные ответы, это противоречит политике.   -  person Ason    schedule 22.09.2016