Использование шрифта является незаменимой частью веб -дизайна. Часто мы хотим использовать конкретный шрифт на веб-странице, но шрифт не является встроенным шрифтом для основных операционных систем, так что пользователи могут не видеть реальный дизайн при просмотре страницы. Наиболее распространенный способ сделать художественные дизайнеры - сделать желаемый текст в картинки. ; 3. Благоприятный для веб -сайта SEO (основные поисковые системы не будут использовать изображение Alt Content в качестве эффективного фактора в оценке актуальности контента веб -страницы). В Интернете есть некоторые методы, которые используют технологию SIFR или JavaScript/Flash Hack, но реализация является либо громоздкой, либо ущербной. Ниже мы хотим поговорить о том, как встроить любой шрифт на веб-странице только через атрибут @Font-Face CSS.
Первый шаг
Получите три формата файла для использования шрифта, чтобы убедиться, что шрифт может быть отображается нормально в основных браузерах.
.Ttf или .otf, подходит для Firefox 3.5, Safari, Opera
.Eot, для Internet Explorer 4.0+
.Svg, подходит для Chrome, iPhone
Ниже мы хотим решить, как получить эти три файла формата определенного шрифта. Как правило, у нас есть какой -то файл формата для этого шрифта под рукой (или уже найден на сайте дизайнерского ресурса), наиболее распространенным из которых является файл .ttf, который нам необходимо преобразовать в оставшиеся два формата файла через этот формат файла. Преобразование форматов файлов шрифтов может быть получено с помощью онлайн -сервиса преобразования шрифтов, предоставленной веб -сайтом Fontsquirrel или OnlineFontConverter. Здесь рекомендуется первый сайт, который позволяет нам выбрать необходимые символы для генерации файлов шрифтов (последний вариант службы), что значительно уменьшает размер файлов шрифтов и делает это решение более практичным.
Шаг 2
После получения файла шрифта в трех форматах, следующим шагом является объявление шрифта в листе стиля и использовать шрифт, где он необходим.
Декларация шрифта заключается в следующем:
@font-face {
семейство шрифтов: «fontnameregular»;
src: url ('fontname.eot');
SRC: Local ('fontname обычный'),
локальный ('fontname'),
url ('fontname.woff') format ('woff'),
url ('fontname.ttf') format ('truetype'),
url ('fontname.svg#fontname') format ('svg');
}
/* Где fontname заменяется вашим именем шрифта*/
Используйте этот шрифт, где он вам нужен на странице:
p {font: 13px fontnameregular, arial, sans-serif;
H1 {font-family: fontnameregular}
или
<p style = "font-family: fontnameregular"> прижать луну в ваших руках, а аромат упавших цветов заполняет вашу одежду </p>
Вот пример, который я сделал через два вышеуказанных шага:
Запустите кодовое поле
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> Полное решение для внедрения любого шрифта на веб -страницах - CSS9.net </title>
<link rel = "styleSheet" href = "http://www.blueidea.com/articleimg/2009/12/7263/style.css"/>
<стиль типа = "text/css">
@font-face {
Фонт-семья: «hakuyoxingshu7000regular»;
src: url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
SRC: Local ('hakuyoxingshu7000 Rigation'), Local ('hakuyoxingshu7000'), url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') Формат ('truetype'),) URL ('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') формат ('svg');
}
#poem {
размер шрифта: 45px;
Фонт-семья: hakuyoxingshu7000regular;
Текст-альбом: Центр;
}
#poem p {height: 30px; line-hight: 30px;}
</style>
</head>
<тело>
<div id = "testdiv">
<h1> Полное решение для внедрения любого шрифта в веб -страницы - CSS9.net </h1>
<h2> Доступ к исходному тексту: <a href = "http://css.net/css-font-face-solution/"> http://css.net/css-font-face-solution/ </a > & nbsp; & nbsp; & nbsp; Следуйте за разработкой веб-фронта.
<div id = "стихотворение">
<h3> облако вегетарианское </h3>
<p> В столице есть одноклассники, и мы встречаемся в вегетарианском павильоне. </p> <p> Слушатель все еще не закончен, но человек, который говорит, уже много говорил. </p> <p> Есть друзья по всей комнате, и я расскажу о гражданских науках. </p> <p> Отправьте маленькие слова в дзен, будьте осторожны и нежны. </p>
</div>
</body>
</html>
[Ctrl+A All Soims: сначала вы можете изменить какой -то код, а затем нажмите запуск]
Шрифт в вышеупомянутой статье использует фонтанную ручку, работающую с скриптом, опубликованный в этом блоге.
Загрузите исходный код для этого примера: веб -страница встроена пример шрифта
Оригинальный текст: http://css9.net/css-font-face-solution/