12 мая 2013 г.

Определение параметров шрифта на веб-странице с помощью расширений Google Chrome

Даже если вы не профессиональный дизайнер, а всего лишь блогер-самоучка, иногда хочется узнать, какой шрифт автор сайта "прописал" в своём творении.
Зачем? Может быть, вам так понравился стиль оформления чужого блога, что вы хотите что-нибудь позаимствовать для своего.
И хотя в Блоггере вполне достаточно разных шаблонов, а также есть возможность редактирования дизайна выбранного шаблона, но методом подбора это делать слишком утомительно. Гораздо проще внести изменения, например, в параметры шрифта статьи (заголовков, ссылок и т.д.) заранее зная их характеристики.

Основные параметры шрифта: 

  • Название шрифта (например, Arial, Tahoma, Helvetica и т.д.)
  • Размер шрифта (высота букв в пикселях (px), Font Size)
  • Высота строки (Line Height)
  • Цвет шрифта (код цвета, например, в виде #333333 или RGB (51, 51, 51) )

Информацию о параметрах шрифта на веб-странице можно узнать, установив в Google Chrome расширения WhatFont и (или) CSSViewer.

Иконки расширений в строке расширений браузера Google Chrome


Расширение WhatFont позволяет определить название шрифта, наведя на букву курсор мыши, а после клика мышью на букве, вы увидите окошко с подробной информацией о шрифте.

Информация о шрифте с помощью WhatFont

Используя расширение CSSViewer, мы можем просмотреть CSS-параметры любой области на веб-странице. Достаточно лишь кликнуть на иконке расширения в строке браузера, а затем на интересующей нас области (или элементе) веб-страницы.

Информационное окно CSSViewer

Может быть, для браузера Google Chrome существуют и другие полезные расширения для дизайнеров, но для простого блогера эти вполне достаточны. Во всяком случае, мне они показались простыми и удобными.


5 комментариев:

  1. Еще можно использовать Firebug и WebDeveloper. Там тоже есть подобные подсказки.

    ОтветитьУдалить
  2. Спасибо большое, а скопировать написанное можно?

    ОтветитьУдалить
  3. Без дополнительных расширений шрифт можно определять с помощью сервиса https://capyba.ru/services/fontfinder/ - нужна только ссылка на страницу. Сервис показывает все используемые шрифты.

    ОтветитьУдалить

Related Posts Plugin for WordPress, Blogger...