Какая техника шрифтов используется здесь?

8

Когда я присутствовал на этом мероприятии ( http://worldtour.fogcreek.com/ ), я заметил, что на этой странице были пользовательские шрифты для части адреса в верхнем левом углу (например, «Fog Creek Software 55 Broadway Fl 55 ....») Когда я посмотрел на исходный код, я не мог определить, что они делают, но он удовлетворял следующим условиям:

  1. Хорошо работает с IE 7,8 (и всеми другими браузерами)
  2. Позволяет использовать любой шрифт, который вы хотите
  3. Есть текстовая база, т.е. без флеш, картинок и т. Д. Таким образом, это лучше для SEO и индексации и тому подобное.

Так какую технику они используют здесь ???

seo html css web-development website-design Дж Ли
источник

Ответы:

13

Они используют @font-faceтехнику. Используя различные файлы и некоторые псевдообозреватели, они способны постоянно обслуживать шрифты во всех браузерах. Использование:

  • True Type и WOFF для Webkit, Gecko и Opera
  • EOT для Internet Explorer
  • SVG для iOS

Из-за структуры CSS он будет проверять, доступен ли шрифт локально, если это не так, и это IE, он будет использовать EOT и больше ничего не загружать. И если это не IE, он загрузит нужный шрифт.

Проверьте Font Squirrel для получения дополнительной информации и @ font-face kit's и генератора шрифтов @ font-face и CSS.

Они также используют text-shadowс цветом, близким к цвету текста. Это создает размытый эффект на текст.

Эли Гандри
источник
2

Этот сайт использует технику шрифтов под названием WOFF (World Open Font Format). В настоящее время он стандартизирован по рекомендации W3C. Это позволяет непосредственно встраивать шрифты в веб-страницы.

http://en.wikipedia.org/wiki/Web_Open_Font_Format

Прочитайте. Кажется, это очень интересная концепция, и она начинает широко использоваться, хотя она была разработана в прошлом году.

Мэтью Браун
источник
1
Одна только WOFF не будет работать на всех браузерах (угадайте, какой). Вот почему вам нужны EOTs.
Lèse Majesté
2

Также проверьте каталог шрифтов Google, который является отличным способом начать использовать шрифты, которые не считаются веб-безопасными. По сути, все, что вам нужно сделать, это добавить тег ссылки к соответствующему шрифту в каталоге перед CSS, который его использует. Google определит браузер через пользовательский агент и выложит необходимый css шрифта. Затем вы можете использовать шрифт в свойстве "font-family".

Вот краткое руководство: http://code.google.com/apis/webfonts/docs/getting_started.html

kwood
источник