Jump to content
  • Sign Up
SnowSilver

Правильное подключение сторонних шрифтов

Recommended Posts

Всем привет! Подскажите с подключением сторонних шрифтов...

1. Предположим мне надо подключит какой то шрифт с разными начертаниями, могу ли я использовать одно имя шрифта в font-family, будет ли в таком случае использоваться правильное - подключенное начертание в зависимости от font-weight ?

2. Проверить, есть ли шрифт в системе(чтоб его не грузить лишний раз), можно с помощью local, такого перечисления думаю достаточно, чтоб наверника проверить:
local('Roboto Thin'), local('RobotoThin'), local('Roboto-Thin') ?

Я подключаю так(для каждого начертания через тире указано начертание):

 @font-face {
    font-family: "Roboto-Thin";
    src: local('Roboto Thin'), local('RobotoThin'), local('Roboto-Thin'), 
         '/fonts/Roboto-Thin.woff2' format('woff2'),
         '/fonts/Roboto-Thin.woff' format('woff');
    font-weight: 100;
    font-style: normal;
} 

@font-face {
    font-family: "Roboto-Light";
    src: local('RobotoLight'), local('Roboto Light'), local('Roboto-Light'), 
         '/fonts/Roboto-Light.woff2' format('woff2'),
         '/fonts/Roboto-Light.woff' format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Roboto-Regular";
    src: local('RobotoRegular'), local('Roboto Regular'), local('Roboto-Regular'), 
         '/fonts/Roboto-Regular.woff2' format('woff2'),
         '/fonts/Roboto-Regular.woff' format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Roboto-Black";
    src: local('RobotoBlack'), local('Roboto Black'), local('Roboto-Black'), 
         '/fonts/Roboto-Black.woff2' format('woff2'),
         '/fonts/Roboto-Black.woff' format('woff');
    font-weight: 900;
    font-style: normal;
}

 

Edited by SnowSilver

Share this post


Link to post
Share on other sites
1 час назад, Alexej сказал:

С первым пунктом понятно, спасибо!

А вот по поводу local()

В статье: 

Цитата

 

Кроме этого, у font-face есть еще одно правило, которое позволяет оптимизировать загрузку вашей страницы — это local. C помощью него мы можем проверить наличие шрифта на компьютере пользователя, и если таковой отсутствует, инициировать его загрузку. В local указывается полное наименование шрифта и его PostScript Name.

Вот такая запись font-face проверит наличие шрифта на компьютере:


@font-face {
    font-family: 'PT Sans';
    src: url('ptsans.eot');
    src: local('PT Sans'), local('PTSans-Regular'), 
         url('ptsans.eot?#iefix') format('embedded-opentype'),
         url('ptsans.woff') format('woff');
}

 

То есть в первом local указываем просто наименование шрифта для любого начертания, например для Roboto это и будет local('Roboto'), а под PostScript Name - подразумевается имя шрифта + его начертание через тире, например для Roboto жирного начертания будет local('Roboto-Black') - верно?

Можно встретить разные варианты, где то можно увидеть такой вариант: 

@font-face {
    font-family: Journal;
    src: local(JournalRegular), local("Journal Regular"),
		 url(journal-webfont-regular.woff);
	font-style: normal;
	font-weight: normal;
}

то есть в local пишется не просто именование шрифта, а сразу начертание "JournalRegular"...

Edited by SnowSilver

Share this post


Link to post
Share on other sites
1 час назад, SnowSilver сказал:

С первым пунктом понятно, спасибо!

А вот по поводу local()

В статье: 

То есть в первом local указываем просто наименование шрифта для любого начертания, например для Roboto это и будет local('Roboto'), а под PostScript Name - подразумевается имя шрифта + его начертание через тире, например для Roboto жирного начертания будет local('Roboto-Black') - верно?

Можно встретить разные варианты, где то можно увидеть такой вариант: 


@font-face {
    font-family: Journal;
    src: local(JournalRegular), local("Journal Regular"),
		 url(journal-webfont-regular.woff);
	font-style: normal;
	font-weight: normal;
}

то есть в local пишется не просто именование шрифта, а сразу начертание "JournalRegular"...

Ну я делаю local без начертания и с начертанием. А как писать с пробелом или с _ или же - я не знаю.... В локал обычно пишу так как шрифт называется в google fonts или захожу в папку с шрифтами винде и смотрю в столбец "семья" как там написано так и подключаю. 

 

 

 

Цитата

но насколько я знаю после установки шрифта в ОС он устанавливается как один шрифт с одним именем то есть в нашем случае Roboto а все остальные как то этому шрифту прикрепляются поэтому думаю не стоит даже писать про начертание в local хотя нужно пойти в спеку и уточнить что именно делает local  берет семью или название файла шрифта. Не знаю как все работает но винде если вы откройте (по крайней мере у меня так) то там нет начертания в отдельных файлах все начертания прикрепляются к одному семейству шрифтов поэтому не совсем все понятно. 

 

Безымянный.png

Edited by Alexej

Share this post


Link to post
Share on other sites
5 часов назад, Alexej сказал:

Ну я делаю local без начертания и с начертанием. А как писать с пробелом или с _ или же - я не знаю.... В локал обычно пишу так как шрифт называется в google fonts или захожу в папку с шрифтами винде и смотрю в столбец "семья" как там написано так и подключаю. 

 

 

 

 

Безымянный.png

Первый local это полное наименование шрифта, а второй local это похоже его PostScript Name. Вроде для шрифтов он гуглится без проблем... 

 

Но что есть  такое "PostScript Name"...? что то затрудняюсь найти информацию на сей счет

Share this post


Link to post
Share on other sites
10 часов назад, SnowSilver сказал:

Первый local это полное наименование шрифта, а второй local это похоже его PostScript Name. Вроде для шрифтов он гуглится без проблем... 

 

Но что есть  такое "PostScript Name"...? что то затрудняюсь найти информацию на сей счет

Наверное это нужно если семейство шрифта есть у пользователя но нет той что нужно начертании.... 

Share this post


Link to post
Share on other sites
37 минут назад, Alexej сказал:

Наверное это нужно если семейство шрифта есть у пользователя но нет той что нужно начертании.... 

Только вот в первом local как раз таки указывают полное наименование шрифта, например local('Roboto Black') - в том числе начертание... 

А вот второй будет local('Roboto-Black')

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By Super_Saimon
      Добрый день!  Подскажите источник, от куда можно импортнуть в свой css файл шрифт DS-DIgital(шрифт как на старых циферблатах, нужен для отображения циферблата на таймере). Не могу  скачать к себе на комп - балуюсь в рабочее время на рабочем компе. И на работе запрет на скачивание без ведома админов чего угодно.
    • By uppercase_css
      Здравствуйте.
      Подскажите, пожалуйста аналог Times New Roman MT Extra Bold , а то он только с латиницей работает.
      Спасибо.
    • By Shiza
      Иногда при подключении шрифтов возникает следующая ситуация:



      Текст просто текст. Без оберток. Проблема возникает в хроме и почти всегда если шрифт используется в срытых (разворачиваемых) блоках или слайдерах (Owl Carousel), то есть на блоках который сначала не отображаются, а появляются позже.
      От чего это может происходить, и что с этим можно сделать?
      P.S. Создать JSFiddle с этой проблемой не удалось.
  • Member Statistics

    46,841
    Total Members
    1,451
    Most Online
    SkyMasteer
    Newest Member
    SkyMasteer
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Облако в помощь: как облачные технологии помогают известным компаниям Ценным опытом нужно делиться, особенно – опытом успешного использования облачных сервисов. Начнем с опыта компаний, чьи товары и услуги на слуху по всему миру. Поговорим о тех, кто внедрил облачные технологии (или планирует это сделать) и выгодно использует свое облачное преимущество над конкурентами.   Немного истории   Люди грезили облаками всегда. И если в буквальном смысле их покорение далось человечеству еще в 18 веке (спасибо братьям Монгольфье), то в интересующем нас значении все произошло много позже.   Ждать пришлось более двух столетий. Да, «облачные» идеи провозглашались еще в 50-х годах 20 века, задолго до появления интернета, но впервые по-настоящему материализовались лишь в 1999 году. Тогда компания Salesforce начала давать пользователям доступ к своим вычислительным ресурсам через веб-сайт. Новинка разлеталась как горячие пирожки, поэтому скоро похожими решениями обзавелись гиганты – Amazon, Google, IBM и Microsoft.   Облако на колесах   Компьютерам, как известно, уже давно не сидится в офисах – добрались они и до автопромышленности, причем много лет назад. А где компьютеры, там и до облака рукой подать. Одними из первых это смекнули в компании Volvo и приступили к созданию умного автомобиля нового поколения. А работать он будет вот как: автомобиль во время движения фиксирует все потенциальные опасности (скользкий участок трассы, яма, авария, обломок дерева и т.д.) и передает их в облачную базу данных, откуда эта информация транслируется на все автомобили, которые приближаются к опасному отрезку пути. Если Volvo успеет внедрить эту технологию раньше всех, то наверняка покорит сердца еще большего количества автолюбителей, в частности тех, кому безопасность на дороге превыше всего.       Финансы В банковском деле вопрос безопасности тоже стоит далеко не на последнем месте. Это, а еще желание опередить конкурентов в плане производительности привело в облака мировых гигантов банковского дела: BBVA, Goldman Sachs, Capital One и других. За признанными авторитетами подтягиваются организации поменьше – облачные технологии становятся трендом среди банкиров.   В Украине процесс виртуализации хоть и отстает немного, но на месте не стоит. Не так давно экс-топы ПриватБанка анонсировали запуск осенью 2017 года первого в стране мобильного банка без физических отделений. Сами разработчики обещают, что приложение будет даже круче, чем Приват24. Ждем.   Умный дом…   Технологии умного дома стремительно обретают популярность по всему миру. Активнее всего их внедряют в США, Китае и Германии. Суть следующая – в доме подключаются датчики и устройства, которые связывают между собой все электроприборы и позволяют управлять ими с помощью одного пульта или даже смартфона. Чтобы хранить и обрабатывать весь массив информации, пользователю, по логике, нужен мощный компьютер, что сказывается на стоимости такого решения. Выход нашелся довольно быстро – обрабатывать информацию в вычислительном облаке, что позволило снизить затраты на умный дом, подняв тем самым его популярность.   Если полноценный умный дом не по карману, то можно выбрать его «упрощенные», бюджетные версии. В частности, компания Xiaomi со своим Smart Home Kit предложила автоматизировать основные процессы в доме по доступной цене, чем значительно повысила свой авторитет на рынке.   …да и город не дурак   Если построить рядом много умных домов, получится умный город? Ну, почти. :) Умный город – это еще и интеллектуальные системы общественного транспорта, виртуальные очереди в поликлинику и городские службы, централизованная система проката велосипедов и автомобилей и много других по-настоящему классных и нужных решений. Среди европейских городов такие системы частично реализованы в Париже, Мадриде, Барселоне, Лондоне.   Не отстает Китай. Так, власти административного района Макао (или, как его еще называют, «Китайский Лас-Вегас») заключили соглашение на внедрение облачных технологий с компанией Alibaba. Уже через 4 года Макао превратится в умный город с развитой ИТ-инфраструктурой.   На этом, пожалуй, пока сделаем паузу. Впишите и свое имя в список великих, прихватив с собой облако на удачу. Не знаете, с чего начать? Обращайтесь к нам за грамотной консультацией, мы рады вам 24х7.    
    • По указанному адресу убрал, ничего не изменилось
    • Здравствуйте. Уберите строку следующую строку в файле "wp-content/themes/yoo_nano2_wp-child/style.css" *{ box-sizing: border-box; }  
  • Popular Contributors

×
×
  • Create New...