Замена шрифтов веб-страниц

После прочтения «Веб-типографика сегодня. Часть V» мне захотелось избавиться от уже приевшихся шрифтов, которые используются на большинстве веб-страниц. Было бы неплохо заменить некоторые из них (например, Arial, Verdana, Tahoma, Times New Roman, Georgia) на более современные (Calibri, Corbel, Constantia).

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

Каким образом заменить один шрифт на другой? Для этого можно использовать локальный фильтрующий прокси-сервер Privoxy, настроив его описанным ниже способом.

1. Установить Privoxy. Перейти в его каталог (C:\Program files\Privoxy).

2. Найти в файле config.txt строчку filterfile default.filter. Подключить пользовательские фильтры следующим образом:

filterfile default.filter
filterfile user.filter # User customizations


3. Создать файл user.filter с содержимым:

FILTER: css-font-family Replace some font families

# 'font'
# Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]?
# <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

# 'font-family'
# Value: [[ <'family-name'> | <'generic-family'> ] [, <'family-name'>| <'generic-family'>]* ] | inherit

s@(font-family\s*:|font\s*:\s*[a-z-]*\s*[a-z-]*\s*[a-z-]*\s*[.0-9]+[a-z%]*(?:/[.0-9]+[a-z%]*)?)\s*"?(Verdana|Arial|Tahoma|Helvetica)"?@$1 sans-serif /*Privoxy*/, $2@ig

s@(font-family\s*:|font\s*:\s*[a-z-]*\s*[a-z-]*\s*[a-z-]*\s*[.0-9]+[a-z%]*(?:/[.0-9]+[a-z%]*)?)\s*"?(Times|Times New Roman|Georgia)"?@$1 serif /*Privoxy*/, $2@ig

s@(font-family\s*:|font\s*:\s*[a-z-]*\s*[a-z-]*\s*[a-z-]*\s*[.0-9]+[a-z%]*(?:/.[0-9]+[a-z%]*)?)\s*"?(Courier|Courier New)"?@$1 monospace /*Privoxy*/, $2@ig


Этот файл определяет пользовательские фильтры, применяемые с CSS- и HTML-коду. Указанные фильтры работают следующим образом. К какдому свойству font-family и font, значение которого начинается с одного из заменяемых шрифтов, в начало списка шрифтов добавляется более интересный вам шрифт. Например,

font-family: Arial, Verdana

преобразуется в

font-family: sans-serif/*Privoxy*/, Arial, Verdana.

4. Добавить в файл user.action строки:

#######################################################################
# CSS filtering

{ +client-header-tagger{css-requests} }
/

{ +server-header-tagger{content-type} }
/

{ +filter{css-font-family} }
TAG:^CSS-REQUEST$
TAG:^(text/html|text/javascript|application/xhtml+xml|application/xml)$

#######################################################################


5. Настроить браузер, указав в качестве прокси-сервера localhost:8118.

6. Очистить кэш браузера.

7. В браузере по умолчанию задать предпочтительные шрифты.

8. Для Firefox: рекомендуется установить расширение No Squint. Оно позволит установить масштаб текста по умолчанию. Можно установить, например, 110 или 115%.

На этом примере видно, что текст отображается шрифтом Corbel, который заменил используемую дизайнерами сайта Verdana.