HTML CSS JavaScript шрифт на сайте без использования изображения - PullRequest
Новая
       0

HTML CSS JavaScript шрифт на сайте без использования изображения

0 голосов
/ 02 февраля 2012

Я знаю о куфоне и еще одном подобном.Но как лучше всего использовать не стандартный веб-шрифт в качестве шрифта на вашем сайте?У меня есть клиент, у которого есть 2 разных шрифта, которые они хотят использовать в качестве текста на всем создаваемом сайте, но они не являются стандартными шрифтами для Интернета.Я мог бы сделать их как изображения, возможно, если бы они были просто навигацией.Но они хотят, чтобы все тело вверх и вниз использовало эти шрифты.

Ответы [ 4 ]

4 голосов
/ 02 февраля 2012

после хороших, плохих времен с cufon я решил использовать @ font-face и наслаждаться им.

если ваша лицензия на шрифт позволяет, http://www.fontsquirrel.com/fontface/generator - хороший генератор для всех необходимых файлов + немного базовых CSS.

2 голосов
/ 02 февраля 2012

Я думаю, что все другие посты говорили то же самое.Я считаю @ font-face лучшим инструментом для альтернативных шрифтов.Если у вас есть собственный шрифт, вы можете использовать генератор font-squirel, как упомянуто Романом.

Но

Если вы выбираете более широкий выбор шрифтов, вы не можете сделать ничего лучше, чем шрифты Google - http://www.google.com/webfonts. Этот сервис легко позволяет добавлять шрифты на ваш сайт.

1 голос
/ 02 февраля 2012

Здесь есть несколько вопросов, которые нужно решить.

Встраивание

Вы можете встраивать файлы шрифтов (OpenType, Web Open Font Format [WOFF] и т. Д.), Используя CSS @font-face,Различные веб-браузеры поддерживают шрифты в разных форматах, поэтому вам нужно будет использовать несколько форматов, чтобы перехватить все варианты.

Должно работать что-то вроде следующего: 

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf')  format('truetype'),
    url('myfont-webfont.svg#svgFontName') format('svg');
}

body {
    font-family: MyFontFamily, /* etc. */ sans-serif;
}

Legal

Вы должны проверить лицензии на шрифты, чтобы убедиться, что они могут быть использованы в Интернете.Тип встраивания, показанный выше, широко считается ограниченной формой распространения, но многие лицензии на шрифты в наши дни довольно либеральны.

1 голос
/ 02 февраля 2012

Это пример использования шрифта на моем сайте. 

@include url('http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css');
@font-face { font-family: VAGLT; src: url('VAGLT.TTF'); } 
@font-face { font-family: VAGBT; font-weight: bold; src: url('VAGBT.TTF'); }

.boldtitle{
    font-family: VAGBT, sans-serif;
    font-weight: bold;
}

Это, конечно, в таблице стилей.

...