Блог

Я видел пару проектов, в которых они просто упоминают название шрифтов, которые они хотят использовать в файле CSS, без какого-либо упоминания источника, TTF или других файлов шрифтов. например

 code {
    font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}
 

Когда я удаляю эти шрифты с помощью CSS в элементе inspect, я вижу, что шрифты изменены. Итак, код работает. Но я не понимаю, как браузер определяет, откуда следует загружать шрифты.

Код работает даже в режиме инкогнито, поэтому я не уверен, что кэширование шрифта браузером является допустимым объяснением.

Обратите внимание, что последний параметр в списке семейства шрифтов-без засечек.

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

Вот почему кажется, что «это работает», когда вы говорите это:

@Фабрицио Кальдеран любит деревья, я проверил системные шрифты с помощью этого css-tricks.com/snippets/css/system-font-stack ссылка. Но упомянутое семейство шрифтов не соответствует ни одному из шрифтов в системных шрифтах. Итак, шрифт по умолчанию должен быть выбран правильно?

Вы правы, он выбирает шрифт по умолчанию, но версию без засечек.

Как вы можете видеть на рисунке выше,я создал sample.html файл и использовал семейство шрифтов для тега body. Таким образом, предоставленный источник не упоминается в разделе семейства шрифтов. в результате шрифты будут загружаться из папки «Шрифты» в моей папке Windows. (Конечно, если вы используете ОС Windows и веб-сайт локально, упомянутый процесс произойдет!)

Существует несколько способов, которыми браузер решает, какие шрифты загружаются/используются:

1. Как заявил пользователь «Фабрицио Кальдеран любит деревья» (перефразировано):

Если источники не указаны, они загружаются с компьютера, на котором запущена веб-страница в браузере.

2. Программист использует внешние API или ссылки, которые встраивают шрифт. Примером этого являются шрифты Google, которые позволяют программистам выбирать нужные шрифты (и выбирать их), а также вставлять их с помощью <link> тега (помещенного в HTML-код) или @import тега (помещенного в файл CSS).

3. Веб-сайт, на который вы смотрите, может содержать @font-face инструкции в их CSS, которые связывают общее имя (т. Е. «Исходный код Pro») с файлом шрифта. Вы можете прочитать больше об этом @font-face здесь и здесь.

Если вы не можете найти доказательств ни одного из них, не могли бы вы поделиться ссылкой на исходный код веб-страницы?

Редактировать

Я взглянул на код на веб-сайте. Похоже, что стиль шрифтов в области отображения/текста:

 .displayArea{
    font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;
}
 

И, похоже, нет источника этих шрифтов, так что это часть 1-й категории, которую я перечислил выше. В принципе, шрифты в кавычках-это шрифты, которые можно использовать, если они уже предварительно установлены на компьютере клиента, если нет, браузер идет вниз по списку и продолжает проверять, установлен ли шрифт у клиента. Конечный шрифт sans-serif -это шрифт по умолчанию , который есть на всех компьютерах, поэтому он служит резервной копией на случай, если все остальные шрифты недоступны.