Как изменить внешний вид страницы в браузере с помощью Greasemonkey

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

Не, ну может кому нравятся размытые очертания букв с цветными каемками. Мне нет. Отключаю ClearType, получаю следующее:

Уже лучше, но линии букв местами слишком толстые, некрасиво. Проблема в том, что наш дизайнер решил использовать новомодный шрифт «Roboto Condensed», в котором нет оптимизации попиксельной прорисовки, он рассчитан на масштабирование и сглаживание средствами системы. Во время слегка бурного обсуждения проблемы (он же Михаил Панюшкин) посоветовал использовать Greasemonkey. Это дополнение для Firefox, которое после загрузки страницы запускает заданные пользователем скрипты, которые могут менять внешний вид страницы. После установки Greasemonkey в панели инструментов появляется рожица и все, больше ничего не происходит. Ладно, нажимаем на стрелочку рядом с рожицей и в выпадающем меню выбираем пункт «New User Script...»:

В окне заполняем хотя бы первые две позиции:

Жмем OK и в открывшееся окно редактора вставляем следующий текст: // ==UserScript== // @name Force Verdana font // @namespace ivan@ivanov.com // @version 1 // @grant none // ==/UserScript== console.log(«Change fonts to Verdana!»); fontFamily = «Verdana»; blocks = ['sans', 'inputtext', 'span', 'p', 'a', 'div']; document.body.style.fontFamily = fontFamily; for (index = 0; index < blocks.length; index++) { elements = document.getElementsByTagName(blocks[index]); for(i = 0; i < elements.length; i++) { elements[i].style.fontFamily = fontFamily; } } За основу этого скрипта был взят скрипт с этой страницы. К сожалению, в исходном тексте была ошибка и какое-то время ушло на выяснение этого момента (на чем редко пишешь, быстро забывается). В итоге родился приведенный выше текст.

Смысл этого скрипта в том, что он в избранных тегах принудительно устанавливает «правильный» шрифт Verdana (ну и выводит в консоль предупреждение). Эти теги задаются в массиве blocks, и далее они перебираются с заменой свойства стиля fontFamily. В итоге после загрузки страницы даже с отключенным сглаживанием она приобретает более-менее пристойный вид:

Да, не совсем такой, как задумывал дизайнер, но такой, которых хочет иметь пользователь. Заметим, что избранный скрипт или Greasemonkey можно оперативно отключать/включать, задавать фильтры для для выбора страниц, на которых будут запускаться те или иные скрипты Greasemonkey, и, разумеется, никто не мешает выбрать свой любимый шрифт или задавать другие правила замены шрифтов (например, заменять только конкретный шрифт), для этого достаточно написать свой скрипт или подправить приведенный в данной заметке. В общем, приятного всем браузинга!