Я хочу использовать некоторые шрифты, и я хочу, чтобы он работал без этого шрифта на клиентском компьютере. Я сделал это, но не работает:
@font-face {
font-family: EntezareZohoor2;
src: url(Entezar2.ttf) format("truetype");
}
.EntezarFont{
font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}
Следующие строки используются для определения шрифта в css
@font-face {
font-family: 'EntezareZohoor2';
src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Следующие строки для определения/использования шрифта в css
#newfont{
font-family:'EntezareZohoor2';
}
Одним из лучших источников информации по этой теме является Paul Irish Синтаксис пуленепробиваемого @шрифтового шрифта.
Прочитайте его, и вы закончите что-то вроде:
/* definition */
@font-face {
font-family: EntezareZohoor2;
src: url('fonts/EntezareZohoor2.eot');
src: url('fonts/EntezareZohoor2.eot?') format('☺'),
url('fonts/EntezareZohoor2.woff') format('woff'),
url('fonts/EntezareZohoor2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* use */
body {
font-family: EntezareZohoor2, Tahoma, serif;
}
Перейти по http://www.w3.org/TR/css3-fonts/
Попробуй это:
@font-face {
font-family: 'EntezareZohoor2';
src: url('EntezareZohoor2.eot');
src: local('EntezareZohoor2'), local('EntezareZohoor2'), url('EntezareZohoor2.ttf') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'RieslingRegular';
src: url('fonts/riesling.eot');
src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}
Я использовал шрифт Ataturk, как это. Я не использовал версию "TTF". Я перевел оригинальную версию шрифта (версия "otf" ) на версию "eot" и "woof". Затем он работает локально, но не работает, когда я загружаю файлы на сервер. Поэтому я добавил также версию "TTF". Теперь он работает в Chrome и Firefox, но Internet Explorer по-прежнему защищает. Когда вы установили на свой компьютер шрифт "Ататюрк", то и рабочий IE тоже. Но я хотел использовать этот шрифт без установки.
@font-face {
font-family: 'Ataturk';
font-style: normal;
font-weight: normal;
src: url('font/ataturk.eot');
src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'),
url('font/ataturk.woff') format('woff');
}
Вы можете увидеть это на моем сайте здесь: http://www.canotur.com
Когда я пошел к шрифтам Google, все, что они мне дали, были истинными файлами шрифтов типа .ttf и вообще не объясняли, как использовать шрифт @, чтобы включить их в мой документ. Я попробовал генератор веб-шрифтов от шрифта squirrel тоже, который просто продолжал загружать gif и не работал... Затем я нашел этот сайт -
У меня был большой успех, используя следующий метод:
Я выбрал кнопку Добавить шрифты, оставив параметры по умолчанию, добавив все мои .ttf, которые Google дал мне для Open Sans (это было похоже на 10, я выбрал множество опций...).
Затем я выбрал кнопку Преобразовать.
Вот лучшая часть!
Они дали мне zip файл со всеми выбранными мной файлами формата шрифтов, .ttf, .woff и .eot. Внутри этого zip файла у них был файл demo.html, который я только дважды нажал, и он открыл веб-страницу в моем браузере, показывая мне пример использования всех различных опций шрифта css, как их реализовать и как они выглядели и т.д..
@font-face
Я до сих пор не знал, как правильно включить шрифты в таблицу стилей, используя @font-face, но потом я заметил, что этот demo.html пришел с собственной таблицей стилей в zip. Я открыл таблицу стилей и показал, как использовать все шрифты с помощью @font-face, чтобы я смог быстро и легко скопировать пасту this в мой проект -
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot');
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Regular.eot');
src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Light.eot');
src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Italic.eot');
src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Bold.eot');
src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
В demo.html также была встроенная таблица стилей, на которую было интересно взглянуть, хотя я знаком с работой с шрифтами и стилями шрифта, когда они включены, поэтому мне это не нужно. Для примера того, как реализовать стиль шрифта в элементе html для ссылочных целей, вы можете использовать следующий метод в аналогичном случае для моего после того, как @font-face был использован правильно -
html, body{
margin: 0;
font-family: 'Open Sans';
}
.banner h1{
font-size: 43px;
font-weight: 700;
}
.banner p{
font-size: 24px;
font-weight: 300;
font-style: italic;
}
Где я могу загрузить эти файлы?