У меня есть несколько шрифтов,
Как я могу просто создать один файл, так как против этого много разных файлов? И, возможно, использовать их в CSS, как обычно, или, как вы, в Photoshop?
например.
small{font-family:"OpenSans"; font-weight: normal;}
strong{font-family:"OpenSans"; font-weight: bold;}
h2 {font-family:"OpenSans"; font-weight: bolder;}
Любая помощь будет назначена.
Простым способом объединения нескольких шрифтов в один файл является их кодирование в base64 и встраивание их в CSS. Они все равно будут разными шрифтами, и общий размер будет увеличиваться. Существуют различные онлайн-инструменты, которые могут создавать css для загружаемых файлов шрифтов, например этот.
Вам нужны разные файлы шрифтов, если вы хотите использовать разные шрифты (обычные, курсивные, полужирные и т.д.), поскольку каждый шрифт реализован как отдельный файл шрифта (на самом деле вам даже нужно его в разных форматах шрифтов, чтобы охватывают разные браузеры).
Но вы можете использовать их как одно семейство шрифтов, как и вы, например, просто Arial и применяете курсив и смело к нему, используя CSS прямо или косвенно (через HTML, например, элементы h2 выделены полужирным шрифтом по умолчанию), Для этого вам нужно объявить семейство шрифтов.
Например, FontSquirrel генерирует CSS-код, который определяет каждый шрифт как семейство шрифтов. Это возможно, но нелогично и неудобно. Например, он генерирует
@font-face {
font-family: 'open_sansbold';
src: url('opensans-bold-webfont.eot');
src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-bold-webfont.woff') format('woff'),
url('opensans-bold-webfont.ttf') format('truetype'),
url('opensans-bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
Чтобы сделать вещи более логичными, измените значение font-weight и измените имя font-family на то, которое вы используете в разных правилах @font-face (для разных шрифтов семейства). Например.
@font-face {
font-family: 'Open Sans';
src: url('opensans-bold-webfont.eot');
src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-bold-webfont.woff') format('woff'),
url('opensans-bold-webfont.ttf') format('truetype'),
url('opensans-bold-webfont.svg#open_sansbold') format('svg');
font-weight: bold;
font-style: normal;
}