Как подключить шрифт в CSS, если он разделен на файлы шрифта в нижнем регистре и отдельно в верхнем?

Question

[dkrylov]

Здравствуйте!

Ситуация в следующем, есть шрифты, и их нужно подключить к сайту через CSS.

Шрифт разделен на 4 файла:
Font - Bold Caps (Жирный в верхнем регистре)
Font - Bold - (Жирный в нижнем регистре)
Font - Regular Caps (Обычный в верхнем регистре)
Font - Regular (Обычный в нижнем регистре)

Подключаю жирный шрифт:

@font-face {
    font-family: 'FontName';
    src: url('/fonts/Font - Bold Caps.ttf');
    font-weight: 700;
    font-style: normal;
}

Подключаю обычный шрифт:

@font-face {
    font-family: 'FontName';
    src: url('/fonts/Font - Regular Caps.ttf');
    font-weight: normal;
    font-style: normal;
}

Подключаю данный шрифт для всего сайта:

body {
font: 16px FontName;
}

Как видно из кода, они оба - Caps, т.е. в верхнем регистре. Как мне подключить оставшиеся 2 файла, чтобы этот шрифт был у меня и в нижнем регистре???

ИЛИ так сделать нельзя, и нужно говорить дизайнеру чтобы объединял шрифты в верхнем и нижнем регистре в одном файле для жирного и НЕ жирного?

Comments

[alex]

Как мне подключить оставшиеся 2 файла

наверное так, а как еще?

spoiler

@font-face {
    font-family: 'Font Lowercase';
    src: url('/fonts/Font - Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Font Lowercase';
    src: url('/fonts/Font - Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

и нужно говорить дизайнеру чтобы объединял шрифты в верхнем и нижнем регистре в одном файле

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

[dkrylov]

Alex: вот я тоже думаю, наверное шрифты должны быть в 2х файлах. Т.е. жирный и обычный. А в них уже и верхний и нижний регистр, верно?

[alex]

dkrylov: да, разделяют по файлам обычно начертания

spoiler

font_bold.ttf
font_bold-italic.ttf
font_light.ttf
font_light-italic.ttf
font_regular.ttf
font_italic.ttf
...

чтобы разделяли по регистру - я такого не встречал

[dkrylov]

Alex: спасибо) Я просто думал, может я что то путаю, и как то с помощью CSS все можно подключить.

[Mark]

Font - Bold Caps.ttf у тебя с пробелами шрифт подключился?))

[dkrylov]

ну я же утрирую, чтобы было понятно на примере. Там по факту по другому файлы называются.

[dkrylov]

Font - Regular Caps

[dkrylov]

ну я же утрирую, чтобы на примере понятно было. там по факту файлы вообще по другому называются.

[Mark]

dkrylov: h1 { font-family: SuperPuperFont; } так не пробовал? вместо h1 можно и class указать и всё что захочешь

[dkrylov]

Mark: Шрифт один - называется он, предположим "Font", и он один подключается в body, для ВСЕГО сайта.

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

Если же я подключу Жирный в нижнем, а обычный в верхнем, то если сделать любой текст жирным, он будет в нижнем регистре. А обычный текст будет в верхнем регистре

[dkrylov]

Mark: И да кстати, шрифт с пробелами у меня подключился. Не вижу ничего странного в этом.

Answer 1

[dkrylov]

В общем решение оказалось следующим:

Шрифты можно подключать с разными начертаниями (Жирный, наклонный, обычный).
НО в каждом файле должен быть и верхний и нижний регистр.
Font-Bold (Верхний и нижний)
Font-Italic (Верхний и нижний)
Font-Regular (Верхний и нижний)

Спасибо за помощь
@potapchino