CSS определяет размер шрифта для каждого шрифта в семье шрифтов?

Question

Макет для моей основной навигации сдвигается неправильно, если используемый шрифт слишком велик (на самом деле, если он слишком широк).

Первый шрифт в семействе шрифтов отлично подходит для определенного шрифта, однако второй шрифт (который будет использоваться, если у него нет первого) слишком широк и сдвинет макет.

Я нашел this similar quesiton, потому что шрифт был слишком высоким. Ответ состоял в том, чтобы использовать блок ex, потому что он основан на высоте.

Есть ли единица, которую я могу использовать для ширины, или есть способ указать размер шрифта для каждого шрифта в семействе шрифтов?

Answer 1

Рассмотрите возможность поставки похожих шрифтов в качестве альтернатив. Например:

font-family: Arial, Helvetica, sans-serif; 
font-family: Tahoma, Geneva, sans-serif; 

Таким образом, альтернативный шрифт не приведет к разрыву макета.

Answer 2

В идеале для шрифтов я бы предложил использовать стандартные классы, такие как x-small (extremely small), small, medium, med-small, large, med-large, x-large и т. Д., И использовать эти классы для разных шрифтов размеры. Только если вы хотите что-то действительно большое, вы всегда можете использовать <h1>, <h2> tags. Я бы использовал% как стандарт для всех этих. В моем использовании с различными шрифтами они редко разбивали используемые ниже классы.

.body { 
    font-family: arial,helvetica,clean,sans-serif; 
} 
.x-small { 
    font-size: 77%; 
    letter-spacing: normal; 
} 
.small { 
    font-size: 85%; 
    letter-spacing: normal; 
} 
.med-small { 
    font-size: 92%; 
    letter-spacing: normal; 
} 
.medium { 
    font-size: 100%; 
    letter-spacing: normal; 
} 
.med-large { 
    font-size: 107%; 
    letter-spacing: normal; 
} 
.large { 
    font-size: 114%; 
    letter-spacing: normal; 
} 
.x-large { 
    font-size: 122%; 
    letter-spacing: normal; 
} 
.x2-large { 
    font-size: 131%; 
    letter-spacing: normal; 
} 
.x3-large { 
    font-size: 138.5%; 
    letter-spacing: normal; 
} 
.strong { 
    font-weight: bold; 
}