Может ли шрифт Basic Sans Light SF использоваться с CSS?

Question

Мне было интересно, если шрифт San Basic Sans Light SF будет использоваться с CSS? Я не уверен, что этот шрифт также принадлежит этому шрифту и не может заставить его работать с CSS. Ближе всего я до сих пор использую семейство шрифтов sans-serif. Мне было интересно, может ли кто-нибудь направить меня на то, как я могу использовать Basic Sans Light SF в своем CSS-коде.

Спасибо, Грант

#follower-alert .text { 
text-shadow: 5px 0px 5px black; 
font-family: sans-serif; 

} 

Answer 1

CSS-font-family свойство сообщает браузеру, чтобы загрузить шрифт из операционной системы. Если браузер не может найти требуемый шрифт, он попробует следующий в списке. Он доходит до конца списка, он использует шрифт браузера по умолчанию.

Что это означает, что при указании определенного шрифта с помощью font-family свойства, вы просто с просьбой о том, что использование клиента, шрифт , если клиент имеет что шрифт, установленный. Если вы попросите Helvetica, но человек, посетивший ваш сайт, не установил Helvetica, браузер вернется к следующему варианту.

Есть несколько ключевых слов, которые не указывают конкретный шрифт, а говорят о том, что браузер загружает тот шрифт, который, по его мнению, наилучшим образом соответствует категории. Большинство браузеров загружают по умолчанию операционную систему для указанной категории. Эти ключевые слова (так называемые родовые фамилии) следующим образом:

• засечек - любой достаточно нейтральный шрифт, который имеет засечки.
• sans-serif - любой довольно нейтральный шрифт, который не имеет засечек.
• monospace - любой шрифт, в котором все символы имеют одинаковую ширину.
• cursive - любой шрифт, который имитирует почерк (это слабо определено).
• fantasy - любой декоративный шрифт с художественными расцветами (это свободно определено).

Вне родовых фамилий вы можете указать конкретный шрифт в кавычках. Если вы установили шрифт на компьютере под названием «Основные Sans Light SF», вы можете использовать следующий CSS свойство:

font-family: "Basic Sans Light SF", sans-serif; 

на вашем компьютере (и любой другой компьютер, который имеет шрифт Basic Sans Light SF установлен) , текст будет отображаться в этом шрифте. На компьютере, на котором не установлен шрифт, будет использоваться другой шрифт sans-serif (независимо от ОС по умолчанию).

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

Вложение шрифтов на вашу страницу slows down load times, но увеличивает согласованность. Поскольку веб-шрифты являются новой технологией, существуют конкурирующие форматы файлов, которые имеют разные уровни поддержки на разных устройствах. Для полного покрытия шрифт, который вы используете, должен быть оптимизирован для Интернета, и вы должны включить в него несколько форматов того же шрифта на вашем сервере. Вы также должны быть уверены, что шрифт, который вы используете, является открытым исходным кодом или имеет лицензию на использование в Интернете.

Google Fonts предлагает большой репозиторий готовых к использованию шрифтов с открытым исходным кодом, размещенный через быстрые CDN и легко встраиваемые на любую веб-страницу. Вы можете использовать шрифт, доступный через эту службу.

Если у вас есть готовый к Интернету и лицензированный шрифт, вы можете разместить его на своем собственном веб-сервере и использовать свойство @font-face вручную. Предполагая, что ваши файлы шрифтов находятся в подпапке с именем «fonts», пример (от CSS Tricks) приведен ниже. Сюда входят все форматы файлов, необходимые для максимально возможного уровня охвата браузером. This page подробно описывает различные типы доступных форматов файлов веб-шрифтов и преимущества/недостатки каждого.

@font-face { 
    font-family: 'Basic Sans Light SF'; 
    src: url('fonts/BasicSansLightSF.eot'); /* IE9 Compat Modes */ 
    src: url('fonts/BasicSansLightSF.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('fonts/BasicSansLightSF.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('fonts/BasicSansLightSF.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('fonts/BasicSansLightSF.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('fonts/BasicSansLightSF.svg#basicSansLightSF') format('svg'); /* Legacy iOS */ 
}