2

Здравствуйте. не могу применить шрифт

<p style="src: url(meiryo.ttf);font-size:22pt;font-weight:bold;">

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

сам файл шрифта лежит в корне

2 ответа 2

4

Ответ выше правильный, но я его хочу дополнить чуток на своем примере:

@font-face {
    font-family: OpenSans;
    font-style: normal;
    font-weight: 300;
    src:    local("Open Sans Light"),
            local('OpenSans-Light'),
            local('Open-Sans-Light'),
            url('/fonts/Open_Sans/OpenSans-Light.ttf')  format('truetype');
    font-display: swap;
}
@font-face {
    font-family: OpenSans;
    font-style: normal;
    font-weight: 400;
    src:    local("Open Sans"),
            local('OpenSans'),
            local('Open-Sans'),
            url('/fonts/Open_Sans/OpenSans-Regular.ttf')  format('truetype');
    font-display: swap;
}

То есть, называете шрифт:

font-family: OpenSans;

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

font-style: normal;

Далее добавляйте жирность шрифта, в основном для light это 300, regular 400, bold 700:

font-weight: 300; 

Далее веселее, мы как бы спрашиваем, есть ли у пользователя такой шрифт вообще на компе, и если да грузим его, а не наш:

src:    local("Open Sans Light"),
        local('OpenSans-Light'),
        local('Open-Sans-Light'),
        url('/fonts/Open_Sans/OpenSans-Light.ttf')  format('truetype');

Ну и последний тренд, насколько я знаю, пихаем:

font-display: swap;

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

2
  • ок. так все заработало. но проблема в том что из за этого страница стала весить 8.5 мегабайт из-за шрифта. другого варианта уменьшить страницу нет? 16 мар 2018 в 16:45
  • @AndreyVladimirovich ну дак это нормально, ты его подгружаешь после полной загрузки страницы теперь, тебя не должны пугать эти 8мб)))
    – Paul Wall
    16 мар 2018 в 19:32
3

Вы не правильно подключаете шрифт:

@font-face {
  font-family: Output Sans;
  src: url(output-sans.woff2) format('woff2'),
       url(output-sans.woff) format('woff');
}

После чего в коде используйте его как:

font-family: Output Sans;

Более глубоко этот вопрос расcматривается здесь.

5
  • 1
    в случае автора url("meiryo.ttf") format("truetype");
    – Alex
    16 мар 2018 в 13:16
  • 1
    Вообще если совсем правильно делать то лучше воспользоваться https://www.fontsquirrel.com/tools/webfont-generator и сконвертировать шрифты в woff2 и woff. После чего подключить к сайту именно в этих форматах и в таком порядке. woff2 и woff разрабатыва специально для веб и поддерживаеться всеми актуальными браузерами, включая IE. 16 мар 2018 в 13:31
  • страница из за шрифта весит почти 9 мегабайт 16 мар 2018 в 16:46
  • Если шрифт 9мб. это означает что там есть символы кроме алфавита. Этим символы нужно удалить. Можно попробовать: fontmin если не поможет тогда нужно очищать в ручном режиме с помощью fontforge. 16 мар 2018 в 17:58
  • Посоветовали еще 1 интересный модуль на тему оптимизации шрифтов: https://github.com/filamentgroup/glyphhanger . Он анализирует переданные ему документы и вырезает неиспользуемые символы из шрифта. 19 мар 2018 в 9:01

Ваш ответ

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

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