Как файл css узнает, как назвать стиль связанного шрифта?

Question

Я учу HTML и CSS вместе, чтобы проникнуть в мир программирования, и это первая настоящая проблема, с которой я столкнулся, которую я не могу понять самостоятельно. Конечно, это процесс, который можно бездумно копировать, но я хочу понять, почему он работает так, как он делает.

В настоящее время я учусь связывать шрифты, в частности от шрифтов Google, для расширения ресурсов. Я должен сделать сайт. Часть кода, которую мне дают, <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">. Из того, что я понимаю, это говорит html документу ссылаться на указанный веб-сайт, когда появляется экземпляр «Abril Fatface». Мой вопрос: как компьютер узнает, что он ссылается на веб-сайт, когда я указываю в стиле, что я хочу «Abril Fatface»? Другими словами, как он знает, как это назвать?

Answer 1

Вы просто включаете файл css, если вы открываете его, имя находится в свойстве font-family. В этом случае:

font-family: 'Abril Fatface';

Answer 2

Я уверен, что кто-то может разбить это даже лучше, чем я, но быстрый поиск use google fonts in css дал мне это Руководство по началу работы от Google .

Здесь Вот некоторые основные моменты:

1. Добавьте ссылку на таблицу стилей для запроса нужного веб-шрифта:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">

Стиль элемента с запрошенным веб-шрифтом, либо в таблице стилей:

.css-selector {
font-family: 'Font Name', serif;
}

Из этого я понял, что API шрифтов Google имеет параметр семейства шрифтов, где каждое слово в имя семейства шрифтов отделено символом +. Свойство font-family *1021* принимает значения в соответствии с предоставлением и даже принимает несколько значений. К счастью, API Google позволяет вам предоставлять несколько семейств шрифтов, если вы разделяете их символом |, например:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Это в основном объясняет, почему это работает. Если вы хотите углубиться в то, как, у Google также есть документация , объясняющая их API . Однако, если вы новичок в веб-разработке, это может быть немного.

TL; DR Может быть достаточно знать, что API предоставляет информацию о семействе шрифтов со своих серверов на вашу страницу, используя форматирование, известное как "JSON" или (J) ava (S) ) Cript (O) bject (N). JSON - это относительно простой способ хранения и транспортировки различных комбинаций данных в Интернете.

Если вы хотите лучше понять JSON и API, я настоятельно рекомендую изучить учебный план FreeCodeCamp . Я лично многому там научился.