Как programmers.stackexchange.com реализует пользовательский шрифт в своем меню навигации? - PullRequest
Новая
       17

Как programmers.stackexchange.com реализует пользовательский шрифт в своем меню навигации?

1 голос
/ 05 марта 2012

Программисты SE реализуют шрифт "Белая доска" в верхнем меню навигации.

Текст выбирается и работает в IE7 +, Firefox, Chrome и Opera. Кажется, на основе JS, так как текст меняется на пользовательский шрифт с небольшой задержкой.

PS: первый правильный ответ помечен как принятый.

Ответы [ 3 ]

2 голосов
/ 05 марта 2012

Шрифт для белой доски реализован с использованием атрибута @ Font-Face CSS2. Вы можете прочитать общее описание того, как реализовать собственный шрифт на своем собственном веб-сайте: здесь

Программистам SE реализован шрифт "Whiteboard", реализован 

@font-face {
  font-family:'WhiteboardRegular';
  src: url('img/house-webfont.eot');
}

Вы можете проверить это, зайдя в all.css Programmers SE

1 голос
/ 05 марта 2012

Они, кажется, просто используют @ font-face . Насколько я вижу, JS не участвует. В браузерах, которые не поддерживают @ font-face, вместо них будет отображаться sans-serif шрифт.

0 голосов
/ 05 марта 2012

Используйте font-family в css и http://www.google.com/webfonts для загрузки шрифтов на вашу страницу.

Например, добавьте это в HTML 

<link href='http://fonts.googleapis.com/css?family=Seaweed+Script' rel='stylesheet' type='text/css'>

и это в вашем css: 

body {
    font-family: 'Seaweed Script', cursive;
}
...