Как объединить шрифты?

У меня есть несколько шрифтов,

  • OpenSans-Bold.ttf
  • OpenSans-boldItalic.ttf
  • OpenSans-extrabold.ttf
  • OpenSans-Italic.ttf
  • OpenSans-light.ttf

Как я могу просто создать один файл, так как против этого много разных файлов? И, возможно, использовать их в CSS, как обычно, или, как вы, в Photoshop?

например.

small{font-family:"OpenSans"; font-weight: normal;}
strong{font-family:"OpenSans"; font-weight: bold;}
h2 {font-family:"OpenSans"; font-weight: bolder;}

Любая помощь будет назначена.

ОТВЕТЫ

Ответ 1

Простым способом объединения нескольких шрифтов в один файл является их кодирование в base64 и встраивание их в CSS. Они все равно будут разными шрифтами, и общий размер будет увеличиваться. Существуют различные онлайн-инструменты, которые могут создавать css для загружаемых файлов шрифтов, например этот.

Ответ 2

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

Но вы можете использовать их как одно семейство шрифтов, как и вы, например, просто 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;
}