Использование шрифтов является неотъемлемой частью веб-дизайна. Часто мы хотим использовать на веб-странице определенный шрифт, но этот шрифт не является встроенным шрифтом основной операционной системы, поэтому пользователи могут не видеть реальный дизайн при просмотре страницы. Самый распространенный метод, используемый арт-дизайнерами, — это превращение желаемого текста в изображения. У него есть несколько очевидных недостатков: 1. Невозможно использовать шрифт в большом масштабе. 2. Содержание изображения нелегко изменить по сравнению с ним. 3. Нелегко изменить шрифт. Это способствует SEO-оптимизации веб-сайта (основные поисковые системы не будут использовать альтернативный контент изображения в качестве эффективного фактора при оценке релевантности веб-контента). В Интернете есть несколько методов, использующих технологию sIFR или хак javascript/flash, но они либо громоздки, либо несовершенны для реализации. Далее я собираюсь поговорить о том, как встроить любой шрифт в веб-страницу только с помощью атрибута CSS @font-face.
первый шаг
Получите три формата файлов шрифта, который будет использоваться, и убедитесь, что шрифт может нормально отображаться в основных браузерах.
Следующее, что нужно решить, — как получить эти три файла формата определенного шрифта. Как правило, у нас есть файл определенного формата шрифта (или мы нашли его на сайте ресурсов по дизайну), наиболее распространенным из них является файл .TTF, и нам нужно преобразовать этот формат файла в два других формата файлов. Преобразование форматов файлов шрифтов можно получить с помощью онлайн-службы преобразования шрифтов, предоставляемой веб-сайтом FontsQuirrel или onlinefontconverter. Здесь рекомендуется первый сайт, который позволяет нам выбирать нужные нам символы для генерации файлов шрифтов (последний вариант в сервисе), что значительно уменьшает размер файлов шрифтов и делает такое решение более практичным.
Шаг 2
После получения файлов шрифтов в трех форматах следующим шагом будет объявление шрифта в таблице стилей и его использование там, где это необходимо.
Объявление шрифта выглядит следующим образом:
@font-face {
семейство шрифтов: 'fontNameRegular';
источник: URL('fontName.eot');
src: local('fontName Regular'),
локальный('имя_шрифта'),
формат URL('fontName.woff')('woff'),
формат URL('fontName.ttf')('truetype'),
url('fontName.svg#fontName') format('svg');
}
/*Замените имя шрифта на имя вашего шрифта*/
Используйте шрифт там, где это необходимо на странице:
р {шрифт: 13 пикселей FontNameRegular, Arial, без засечек};
h1 {семейство шрифтов: FontNameRegular}
или
Пока луна находится в воде, аромат опавших цветов наполняет одежду
Вот пример того, что я сделал, выполнив два вышеуказанных шага:
Окно запуска кода
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<голова>