2012-04-24 4 views
0

Хорошо, я новичок в CSS, поэтому идем. В шаблоне я использую таблицу стилейCSS-таблица стилей и пользовательские шрифты

head {font-family: Verdana; Размер шрифта: 16px; цвет: # 000000;}
корпус {font-family: Verdana; Размер шрифта: 12px; цвет: #ffffff}
a {color: # ff0000; семейство шрифтов: Verdana; font-size: 30px;}
bluetext {color: # 0000ff;}
tooltip {font-family: Verdana; Размер шрифта: 11px; цвет: #ffffff;}

Поэтому я считаю, что это определение того, какой шрифт должен быть для каждого из этих разделов. Что мне делать, если я хочу использовать собственный шрифт вместо Verdana для всех этих разделов? У меня есть файл .ttf, но я не знаю, что еще делать.

Заранее благодарен!

+0

возможный дубликат [Как использовать наш пользовательский шрифт на наш сайт] (http://stackoverflow.com/questions/1718488/how-to-use-our-custom-font-on-our-website) – Quentin

+1

Вам не нужно объявлять семейство шрифтов, цвет и т. д. для каждого класса. Они будут унаследованы от их родительских элементов, поэтому настройка семейства шрифтов и цвета необходима только для элемента body и элементов, которые вы хотите переопределить. Кроме того, раздел 'head' страницы содержит только такие элементы, как заголовок страницы, таблицы стилей и т. Д., Но ничего не видно на странице, поэтому стилизация не делает ничего. Наконец, вы должны изучить классы и их обозначения в css, классы 'bluetext' и' tooltip' должны быть '.bluetext' и' .tooltip'. –

ответ

0

Вы должны использовать это в файл CSS:

@font-face { 
    font-family: your_font; 
    src: url('your_font.ttf'); 
} 

Для того, чтобы работать на IE, вы должны экспортировать другую версию шрифта с .eot расширением и добавить еще одно свойство Src.

Edit: Вот полезная ссылка об использовании @ шрифта лицо: http://www.webistrate.com/css3-custom-fonts-using-font-face/

2

Вы должны использовать шрифт-лицо для этого. Основная реализация:

@font-face { 
    font-family: CustomFontName; 
    src: url(http://path-to/customfont.ttf); 
    font-weight:400; 
} 

Затем используйте его, как и любой другой шрифт, в любом другом стиле.

p { 
    font-family: CustomFontName, Helvetica, Arial, sans-serif; 
} 
7

Сначала сгенерируйте шрифт для всех браузер как woff для Mozilla, eot для IE и т.д. Таким образом, вы можете создать из http://www.fontsquirrel.com/fontface/generator & http://www.font2web.com/. Затем напишите @font-face в вашем CSS.

@font-face { 
    font-family: 'font'; 
    src: url('font.eot?') format('eot'), url('font.woff') format('woff'), url('font.ttf') format('truetype'); 
} 
body{ 
    font-family: 'font'; 
    color:#fff; 
font-size:12px; 
} 
.head {font-size:16px; color:#000000;} 
a {color:#ff0000; font-size:30px;} 
.bluetext {color:#0000ff;} 
.tooltip{font-size:11px;} 
0

Сначала установите этот шрифт на свой сервер/систему/корень.

& затем применить, как это в вашем CSS

@font-face { 
     font-family: 'myriadproregular'(i.e.custom font name); 
     src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype"); 
    } 
    and if you want more than one font you can do the same 
    @font-face { 
     font-family: 'myriadprocond'; 
     src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype"); 
    } 
    @font-face { 
     font-family: 'myriadprosemibold'; 
     src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype"); 
    } 

просто использовать имя шрифта, где когда-либо вы хотите использовать , такие как

p 
{ 
font-family:"custom font name" 

} 
Смежные вопросы