БЛОГ НА HUSL


FontForge: При сохранении шрифта из ttf в woff2, теряется вес

Автор вопроса: Дмитрий Варзанов 
@font-face {
     font-family: 'Open Sans';
     src: url(./f_latin.ttf) format('truetype');
}
body {
     font-family: 'Open Sans';
}

введите сюда описание изображения

Использую программу FontForge, исходный формат ttf, необходимо сохранить шрифт в woff2.

Собственно, столкнулся с тем, что после преобразования в формат woff2, перестает работать font-weight.

Результат с woff2:

введите сюда описание изображения

@font-face {
      font-family: 'Open Sans';
      src: url(./test.woff2) format('woff2');
}
body {
      font-family: 'Open Sans';
}

Видно что даже шрифт немного изменился. Он по прежнему применяется, но непонятно почему он меняется и перестает работать диапазон насыщенности от 350 до 700.

Я только начинаю осваиваться, пытаться работать со шрифтами. Для себя выбрал программу FontForge, возможно есть лучший вариант. но этот бесплатный. Подскажите если что...

Не знаю как загрузить архив с исходным шрифтом, загрузил на яндекс диск: https://disk.yandex.ru/d/kyRk7H2CZ0G35A

Там всего 1 файл шрифта ttf.

Просто, открыл файл, далее Файл -> сохранить как шрифт. Ничего не меняя, сохраняю. И на выходе получаю другое отображение шрифта без возможности контролировать вес. введите сюда описание изображения

https://ru.stackoverflow.com/posts/1618024/edit#
@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    src: url(./f_latin.ttf) format('truetype');
}
* {
    position: relative;
    margin:0;
    outline: none;
    box-sizing:border-box;
    -webkit-tap-highlight-color: transparent;
}
body {
  display: flex;
  gap:10px;
  margin:10px;
    height:400px;
  > div {
      border: 1px solid #000;
            > p {
                padding: 10px;
            }
   }
}
<html lang="ru-RU">
  <head> 

    </head>
    <body>
        <div style="font-family: 'Open Sans';">
            <p style='font-weight: 700; font-size:20px;'>weight-700/size-20: Test Test Test Test</p>
            <p style='font-weight: 670; font-size:19px;'>weight-670/size-19: Test Test Test Test</p>
            <p style='font-weight: 550; font-size:18px;'>weight-550/size-18: Test Test Test Test</p>
            <p style='font-weight: 400; font-size:16px;'>weight-400/size-16: Test Test Test Test</p>
            <p style='font-weight: 300; font-size:14px;'>weight-300/size-14: Test Test Test Test</p>
        </div>
    </body>
</html>


Источник

Ответы (2 шт):

Автор решения: InterceptorTSK

В официальном репозитории OpenSans:

OpenSans-Bold.ttf
OpenSans-ExtraBold.ttf
OpenSans-Light.ttf
OpenSans-Regular.ttf
OpenSans-SemiBold.ttf

[Начертания/гарнитуры убраны, хотя они есть (Condensed/Italic), суть не в этом, что бы список не "распух", Condensed/Italic - убраны]

Суть следующая, этот шрифт имеет 5 [строго пять] весов, не имеет промежуточных. И на самом деле этот шрифт - это пять жёстких файлов, на пять весов.

Нужно посмотреть соответствие численных весов в самих [пяти] файлах шрифтов, т.е. построить соответствие тому, что указано в файлах, типа такого:

OpenSans-Bold       700?
OpenSans-ExtraBold  800? 900?
OpenSans-Light      300? 200?
OpenSans-Regular    400?
OpenSans-SemiBold   500? 600?

Далее зная числа - нужно использовать строго эти числа весов, строго из файлов шрифтов.

  1. Далее собираете [настраиваете] css под один единый font-face, где описаны пять файлов и веса.

  2. Или же собираете [настраиваете] css под пять font-face, но в каждом из них по одному файлу.

Иначе говоря, шрифт так построен. Для каждого веса - строго свой файл шрифта. Т.е. если файл шрифта regular, то к нему нельзя применять вес bold, можно применять вес regular т.е. например 400. А он точно 400? См. в сам файл шрифта regular. Итд итп.

С конвертацией в woff/woff2 обычно проблем нет. А вот с описанием шрифта, или пачки файлов шрифтов в font-face - как раз проблема есть. Изначально соберите корректный font-face [или 5 font-face] под пять файлов весов. Затем можно экспериментировать с woff/woff2.

П.с.: Второй способ построения font-face предпочтительней. Потому что в итоге [в конечном коде] вес не трогается [не используется] вообще. Иначе говоря конечный код, это [примеры]:

body {
    font-family: 'OpenSans Light';
}
body {
    font-family: 'OpenSans Regular';
}
body {
    font-family: 'OpenSans SemiBold';
}

Пример с вашим div, у вас:

<div style="font-family: 'Open Sans';">
    <p style='font-weight: 700; font-size:20px;'>weight-700/size-20: Test Test</p>
    <p style='font-weight: 670; font-size:19px;'>weight-670/size-19: Test Test</p>
    <p style='font-weight: 550; font-size:18px;'>weight-550/size-18: Test Test</p>
    <p style='font-weight: 400; font-size:16px;'>weight-400/size-16: Test Test</p>
    <p style='font-weight: 300; font-size:14px;'>weight-300/size-14: Test Test</p>
</div>

Но сильно лучше сделать вот так, на это нужны 5 font-face:

<div>
    <p style="font-family:'OpenSans ExtraBold'; font-size:20px;">weight-800?/size-20: Test Test</p>
    <p style="font-family:'OpenSans Bold';      font-size:19px;">weight-700?/size-19: Test Test</p>
    <p style="font-family:'OpenSans SemiBold';  font-size:18px;">weight-500?/size-18: Test Test</p>
    <p style="font-family:'OpenSans Regular';   font-size:16px;">weight-400?/size-16: Test Test</p>
    <p style="font-family:'OpenSans Light';     font-size:14px;">weight-300?/size-14: Test Test</p>
</div>
→ Ссылка
Автор решения: BlackStar1991

@InterceptorTSK Вы тут написали, полную дичь ... 1) в файле стилей вы 3 раза переопредяете родительский шрифт для корневого тега body - глупость 2) для примера правильно, но так писать не надо, лучше сделать привязку к классам или тегам 3) Вы создали 5 семейств шрифтов для браузера, это будет работать - но с точки зрения обработки браузера это совершенно разные шрифты. Это всё можно сократить до "Open Sans" правильно указав путь для каждой жирности. То что Figma или Photoshop отображает - это для дизайнера, а не для нормального верстальщика. Вообщем оно должно выглядить как-то так

@font-face {
  font-family: 'Open Sans';
  /* src: url('/fonts/OpenSans-Regular.woff2') format('woff2'); тут пишите ваш локальный адресс к семейству */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  /* src: url('/fonts/OpenSans-Bold.woff2') format('woff2'); тут пишите ваш локальный адресс к семейству */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* И тд. для каждого веса который вам нужен. + стиливые если надо Я подключил гугловские для примера */


body {
  font-family: 'Open Sans', sans-serif;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

<div>
  <p style='font-weight: 700; font-size:20px;'>weight-700/size-20: Test Test Test Test</p>
  <p style='font-weight: 670; font-size:19px;'>weight-670/size-19: Test Test Test Test</p>
  <p style='font-weight: 550; font-size:18px;'>weight-550/size-18: Test Test Test Test</p>
  <p style='font-weight: 400; font-size:16px;'>weight-400/size-16: Test Test Test Test</p>
  <p style='font-weight: 300; font-size:14px;'>weight-300/size-14: Test Test Test Test</p>
</div>

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

Ещё маленькое примечание, обычно жирность шрифтов кратна 100... От 100 до 900, если они заданны. И то что вы тут понаписывали 670 550 каждый браузер будет обрабатывать по своему... - тот кто это написал или очень понимает что делает, или полный профан. Есть конечно переменные (variable) шрифты, у которых можно задавать плавную жирность (вес) от 100 до 900 Open Sans Variable там просто пишут диапазон font-weight: 100 900; но это явно не тема данного вопроса.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.