Jump to content
  • 0

@font-face и безопаснные шрифты

Stager36

Asked by Stager36,

 Share

Question

Stager36 Explorer

Stager36

Posted
Posted

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

8f57hn9zahdv8fs4umzrk3ol2.png

Отсюда:
Вопрос 1:
Шрифты подключаемые через @font-face лежат на сервере вместе со всеми файлами которые составляют сайт. Т.е. по идее они будут доступны всегда, когда доступен сам сайт. Нужно ли в этом случае указывать другие "безопасные шрифты" в свойстве font-face?

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

Как я понимаю, нужно найти список этих безопасных шрифтов, например здесь - http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html и просто визуально ищем шрифт который максимально схож с нашим нестандартным, верно?
Так, например, на шрифт представленный на картинке, как мне кажется похож Lucida Console.
Правильно ли я рассуждаю или есть какой то другой подход к решению этой задачи?

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
WEB-best Explorer

WEB-best

Posted
Posted

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

2. Можете указать через запятую, например: Arial, Verdana и т.д., а в конце добавьте sans-serif или serif, почитайте в интернете что это такое.

Link to comment
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
Answer this question...

×   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.

×
 Share
Go to question listing

  • Similar Content

    • Super_Saimon
      Ссылка для import шрифта DS-Digital в css
      By Super_Saimon
      Добрый день!  Подскажите источник, от куда можно импортнуть в свой css файл шрифт DS-DIgital(шрифт как на старых циферблатах, нужен для отображения циферблата на таймере). Не могу  скачать к себе на комп - балуюсь в рабочее время на рабочем компе. И на работе запрет на скачивание без ведома админов чего угодно.
    • SnowSilver
      Правильное подключение сторонних шрифтов
      By SnowSilver
      Всем привет! Подскажите с подключением сторонних шрифтов...
      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; }  
    • uppercase_css
      Кириллический аналог Times New Roman MT Extra Bold ?
      By uppercase_css
      Здравствуйте.
      Подскажите, пожалуйста аналог Times New Roman MT Extra Bold , а то он только с латиницей работает.
      Спасибо.
    • Shiza
      Проблема с рендером шрифтов
      By Shiza
      Иногда при подключении шрифтов возникает следующая ситуация:



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

      Из-за этого возникает проблема, когда я хочу добавить псевдоэлемент внутри во всю ширину этой кнопки (нужен для эффекта), справа от него получается зазор, где виден фон, несмотря на то, что указано right: 0:

       
      Это можно, как-то исправить без явного указания размеров?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept