CSS: Как определить функции, которые имеет определенный шрифт ttf?

Question

У меня есть произвольный шрифт ttf, который я хочу использовать в своем веб-приложении.

Как я могу определить, какие характеристики, такие как «жирный», «курсив» доступны в этом шрифте?

фона: Я хочу, чтобы избежать этого, я должен попробовать все различные настройки, такие как:

font-weight: bold; 
font-style: italic; 

для того, чтобы увидеть, который один имеет влияние на внешний вид шрифта на моем веб-сайте.

Answer 1

Каждый шрифт (если имеется вес) поставляется в отдельном файле формата истинного типа для каждого веса шрифта.

например.

Roboto.ttf 
Roboto-Italic.ttf 
Roboto-Bold.ttf 

Таким образом, вам нужно указать, что есть что в вашем файле CSS, как так:

@font-face { 
    font-family: 'Roboto'; 
    font-weight: normal; 
    url('fonts/Roboto.ttf') format('truetype')/*ttf*/; 
} 

@font-face { 
    font-family: 'Roboto'; 
    font-weight: bold; 
    url('fonts/Roboto-Bold.ttf') format('truetype')/*ttf*/; 
} 

@font-face { 
    font-family: 'Roboto'; 
    font-weight: lighter; 
    font-style: italic; 
    url('fonts/Roboto-Italic.ttf') format('truetype')/*ttf*/; 
} 

В вашем случае, вы можете просмотреть конкретный файл непосредственно, нажав на него дважды в Windows/Исследователи MacOS/Linux.

Если вы хотите использовать стороннее программное решение, я предлагаю вам дать opentype.js.

Answer 2

Позвольте мне сократить эту мысль коротко: это не так, как работают ttf (или на самом деле любые) шрифты. Жирным шрифтом, курсивом и т. Д. Являются отдельные «физические» файлы на вашем жестком диске, а вид стиля, который вы видите в приложениях Office, текстовых редакторах и т. Д., Поступает из ОС, показывая вам абстракцию: он отображает только имя семейства шрифтов, а не список отдельных файлов ttf или otf, а затем отображает элементы управления стилем/весом, которые запускают фактический переключатель ресурса шрифта из одного файла в другой, даже если вы не заметили.

Итак: если у вас есть файл ttf, этот файл представляет собой только одно конкретное выражение лица шрифта (регулярное, полужирное, курсивное, полужирное, или даже более подробное на основе свойств метаданных OpenType).

Чтобы сделать вещи еще более увлекательными: если вы хотите использовать шрифты в CSS, CSS даже не заботит о том, что такое конкретный ресурс шрифта. Он полностью полагается на вас, чтобы сказать, что это такое, и вы можете лгать: CSS поверит вам. Если вы используете @font-face правило, которое вы получите сказать, какой файл шрифта, чтобы использовать для конкретной комбинации font-* свойств, так что вы находитесь в водительском сиденье:

@font-face { 
    font-family: MyFont; 
    /* CSS has no idea, nor does it care, what this font "really" is */ 
    src: url('myfont-Bold-Italic.ttf') format("truetype"); 
    /* so we tell it this font is applicable to weight:100, or ultra-thin */ 
    font-weight: 100; 
    /* and we also tell it that this font is applicable in "normal" style */ 
    font-style: normal; 
} 

И вуаля, насколько страницы стиль вы просто с использованием MyFont с обычным стилем и весом 100 будет загружать все, что вам нужно было использовать, ttf. Механизм CSS не заботится и даже не знает, что ресурс, который вы ему сказали, на самом деле является жирным курсивом выражения семейства шрифтов.Все это знают, что вы сказали, этот шрифт должен быть использован для weight:100/style:normal так это то, что он собирается использовать в чем-то вроде этого:

body { 
    font-family: MyFont, sans-serif /* weight mismatch, so this will probably fall through */ 
} 

h1 { 
    weight: 100; /* weight/style match: this will use myfont-Bold-Italic.ttf! */ 
}