См. Этот вопрос и ответ: WebKit против Mozilla вертикальное выравнивание глифов шрифта в рамке
По сути, CSS позволяет вам играть с позицией текстовых элементов, но с фактической буквойпозиционирование против элемента зависит от шрифта и браузера.Вы не можете напрямую изменить это, что означает, что, теоретически, вы не можете быть уверены в фактическом положении самих букв.
CSS дает вам косвенный доступ, например, с vertical-align , вы можете выровнять текст с родительским текстом.Таким образом, в зависимости от значения, элементы будут располагаться относительно фактических букв.Например:
div {
font-size: 20px;
line-height: 1.2;
border-top: solid lightgray 1px;
font-family: arial;
}
div span {
display: inline-block;
background-color: lightblue;
border-top: solid red 1px;
}
.topalign span {
vertical-align: top;
}
.bottomalign span {
vertical-align: bottom;
}
<div class="topalign">
<span style="font-family: 'helvetica neue'; ">Helvetica N</span>
<span style="font-family: 'arial'; font-size: 30px">Arial</span>
<span style="font-family: 'Times new roman'; ">Times NR</span>
<span style="font-family: 'Tahoma'; font-size: 15px;">Tahoma</span>
</div>
<div class="bottomalign">
<span style="font-family: 'helvetica neue'; ">Helvetica N</span>
<span style="font-family: 'arial'; font-size: 30px">Arial</span>
<span style="font-family: 'Times new roman'; ">Times NR</span>
<span style="font-family: 'Tahoma'; font-size: 15px;">Tahoma</span>
</div>
Вы также можете поиграть с line-height , что изменит высоту текстового элемента без изменения размера шрифта, что означает, что вы можетеболее или менее контролировать, где вы хотите разместить письмо.Но опять же, разные шрифты / браузеры будут отображаться по-разному.Вы все еще не располагаете буквы точно.Например:
div {
font-size: 30px;
line-height: 1.2;
border-top: solid lightgray 1px;
font-family: arial;
}
div span {
display: inline-block;
background-color: lightblue;
border-top: solid red 1px;
}
.topalign span {
vertical-align: top;
}
<div class="topalign">
<span style="font-family: 'helvetica neue'; ">Helvetica N</span>
<span style="font-family: 'arial'; line-height: 1.5;">Arial</span>
<span style="font-family: 'Times new roman'; line-height: 0.5;">Times NR</span>
<span style="font-family: 'Tahoma'; ">Tahoma</span>
</div>
Таким образом, теоретически вы не можете точно определить фактические позиции букв именно там, где вы хотите.Это не может быть явным, и поэтому может привести к несоответствиям во всем браузере.
Как говорится, случай, на который вы указываете, похоже на ошибку Firefox со шрифтом Helvetica.Буквенное расположение Helvetica не согласуется с другими шрифтами или другими браузерами.Это особенно очевидно при сравнении с Helvetica Neue или Arial , которые должны быть более или менее одинаковыми.Смотри:
div {
font-size: 30px;
line-height: 1.2;
border-top: solid lightgray 1px;
font-family: arial;
}
div span {
display: inline-block;
background-color: lightblue;
border-top: solid red 1px;
}
.topalign span {
vertical-align: top;
}
<div class="topalign">
<span style="font-family: 'helvetica'; ">Helvetica </span>
<span style="font-family: 'helvetica neue'; ">Helvetica N</span>
<span style="font-family: 'arial'; ">Arial</span>
</div>
Даже если вы не можете явно указать расположение букв, тем не менее, вы можете ожидать определенного уровня согласованности.Обычно, есть нормальная и когерентная прокладка, которая более или менее равна сверху и снизу.Он может варьироваться от шрифта к шрифту и от браузера к браузеру, но способ отображения helvetica в Firefox наверняка кажется ошибкой (по крайней мере, для меня, может быть, есть причина, но я не понимаю, почему).
Так что если вы можете заменить Helvetica на Helvetica Neue , вы можете играть с line-height , чтобы расположить букву против элемента и достичьто, что ты хочешь.Например, обычно высота строки около 0,75 прибывает заподлицо с верхним и нижним заглавными буквами, что означает, что, располагая элемент, вы можете расположить букву.Вот так например:
* {
margin: 0;
padding: 0;
}
#btn_signup {
opacity: 1;
position: absolute;
width: 185px;
height: 50px;
left: 10px;
top: 10px;
overflow: visible;
}
#Rectangle_1 {
opacity: 1;
fill: transparent;
stroke: rgb(67, 66, 93);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 185px;
height: 50px;
left: 0px;
top: 0px;
}
#Sign_up {
opacity: 1;
position: absolute;
left: 58px;
top: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: visible;
width: 63px;
white-space: nowrap;
text-align: center;
}
#Path_1 {
opacity: 1;
fill: rgba(0,0,0,0);
stroke: rgb(112, 112, 112);
stroke-width: 0.5px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Path_1 {
overflow: visible;
position: absolute;
top: 16.5px;
left: 1px;
width: 183.5px;
height: 0.5px;
transform: matrix(1,0,0,1,0,0);
}
<div id="A5">
<div id="btn_signup">
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="4" ry="4" x="0" y="0" width="185" height="50"></rect>
</svg>
<div id="Sign_up">
<span style="font-family:Helvetica neue;font-style:normal;font-weight:normal;font-size:18px;color:rgba(77,79,92,1);display:inherit;line-height: 0.75;">Sign up</span>
</div>
<svg viewBox="12.5 0 183.5 0.5" class="Path_1">
<path id="Path_1" d="M 12.5 0 L 196 0"></path>
</svg>
</div>
</div>