0

Товарищи, добрый вечер, помогите справится с проблемой. Судьба злодейка заставила меня, как бэкэндера java, параллельно заниматься и фронтом.

И вот не могу никак сделать шрифт Calibri Light, чтобы он отображался в macOS так же красиво как и в Windows.

Знаю, что данный язык на маке нет и вызвать его напрямую нельзя, приходится скачивать и добавлять через @font-face.

@font-face {
  font-family: "Calibri Light";
  src: url('../font/calibriLight.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html * {
  font-family: "Calibri Light", sans-serif !important;
}

Но загадка все равно осталась, в Windows, данный шрифт отображается тонким красивым стилем, вот как это выглядит

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

А вот как это в macOS выглядит, даже браузеры пробовал различные.

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

Как видно, шрифт немного жирнее. Это можно как-то исправить, пытался экспериментировать с Font-weight, не помогло.

Подскажите, пожалуйста, советом.

1 ответ 1

1

Разные платформы воспринимают разные форматы шрифтов

@font-face {
    font-family: 'Calibri';
    src: url('../font/calibriLight.ttf') format('ttf'),
         url('../font/calibriLight.woff') format('woff'),
         url('../font/calibriLight.woff2') format('woff2'),
         url('../fonts/calibriLight.svg') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Calibri';
    src: url('../font/calibriRegular.ttf') format('ttf'),
         url('../font/calibriRegular.woff') format('woff'),
         url('../font/calibriRegular.woff2') format('woff2'),
         url('../fonts/calibriRegular.svg') format('svg');
    font-weight: 400; (Комментарий Tiny: 100, Light: 300, Regular: 400, Medium: 500, Bold: 700: Black: 900);
    font-style: normal;
}

@font-face {
    font-family: 'Calibri';
    src: url('../font/calibriRegularItalic.ttf') format('ttf'),
         url('../font/calibriRegularItalic.woff') format('woff'),
         url('../font/calibriRegularItalic.woff2') format('woff2'),
         url('../fonts/calibriRegularItalic.svg') format('svg');
    font-weight: 400; (Тоже самое)
    font-style: italic; (Начертания шрифтов: normal:Обычное начертание текста.
                                             italic: Курсивное начертание.
                                             oblique: Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.)
}

Конвертировать шрифты можно здесь: https://transfonter.org

3
  • но я так понял на macOS с этим беда. Так как все эти свойства перепробовал. Font-weight меняя до 100 до 900 особо не отличаются. 3 мар 2019 в 7:52
  • @Владислав странный ответ. Просто кусок теории. Я сейчас столкнулся с такой же проблемой, решения не могу найти нигде. 22 ноя 2019 в 13:34
  • @SergeyHarchenko Но я так и не смог решить 25 ноя 2019 в 13:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.