Со времен, когда я увлекался изучением операционных систем семейства Linux, для меня небезразличной была тема цифровой безопасности. Благо, системы Linux имеют богатый набор инструментов в этой области.

С того времени ничего не изменилось и при любом удобном случае я всегда поступаю по принципу - “безопасности много не бывает”. Особенно, когда это касается сайтов, выложенных во всеобщем доступе и работающих на такой мега-популярной CMS, как WordPress (со всеми вытекающими отсюда последствиями).

Поэтому неудивительно, что рано или поздно у меня возник вопрос: “А как так происходит, что я могу часами “висеть” подключенным к административной панели WordPress, передавая при этом на хостинг самую различную информацию: текст, изображения и пароли в том числе. И все это происходит по незащищенному, незашифрованному каналу?”

То есть - я подключаюсь к панели, она у меня запрашивает пароль и я отсылаю его в открытом виде. Но ведь тогда любой желающий может подключиться и перехватить этот пароль в готовом виде, ему даже не потребуются всякие брутфорсы со словарями. Однако, так дело не пойдет!

Логичным для меня шагом было найти доступный мануальчик по созданию безопасного канала связи с административной панелью WordPress. Но вот незадача - на русском языке я такового не нашел. Пришлось перевести англоязычную статью, вольный перевод которой привожу ниже.

Перед установкой WordPress у вас уже должен быть SSL-сертификат, который подключается к учетной записи хостинга, на котором будет располагаться ваш сайт. Если у вас нет сертификата SSL, вам необходимо приобрести его.

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

Для того, чтобы активировать сертификат SSL в WordPress, необходимо отредактировать файл

1
wp-config.php
. Можете поступить двумя способами:

  1. скачать этот файл на локальную машину, используя файловый менеджер FTP
  2. воспользоваться встроенным редактором файлов в файловом менеджере FTP (например, FileZilla)

Подключение SSL к административной панели WordPress

  1. Открываем для редактирования файл

    1
    
    wp-config.php

  2. Находим в этом файле строку:

/* That's all, stop editing! Happy blogging. */
  1. Выше этой строки добавляем в файл две строки:
define('FORCE_SSL_ADMIN', true);
define('FORCE_SSL_LOGIN', true);
  1. В результате файл
    1
    
    wp-onfig.php
    должен выглядеть следующим образом:
define('FORCE_SSL_ADMIN', true);
define('FORCE_SSL_LOGIN', true);
/* That's all, stop editing! Happy blogging. */

Теперь каждый раз, когда вы подключитесь к административной панели WordPress, в адресной строке браузера вы увидите, что url начинается с

1
https://
вместо
1
http://
.

Заключение

Все хорошо, но теперь осталось выкроить “немного” маленьких зеленых бумажечек, чтобы приобрести SSL-сертификат.


Начал создавать серию статей по Bootstrap, чтобы основательно изучить для себя данный вопрос. Но вот незадача - придется на время отложить его в сторону и отвлечься на пару моментов.

Первый из них - это язык Markdown, а второй - модульные сетки. И если без первого вопроса изучение Bootstrap можно продолжить без какого-либо ущерба (до этого же как-то обходился без него?), то вот со вторым вопросом посложнее будет.

Дело в том, что фреймворк Bootstrap в основе своей работы использует модульную сетку. А вы хорошо себе представляете (и знаете ли вообще?), что такое модульная сетка?

Начнем с языка Markdown

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

Язык Markdown - по мне, так его языком даже назвать нельзя. Это просто специальный синтаксис, призвание которого - облегчить и убыстрить написание HTML-документов. Это важно для людей, которые или сами ведут блоги\сайты или профессия которых называется контент-менеджер. Другими словами, это люди, которые часто пишут статьи с форматированием в виде HTML-документов.

Если вы хотя бы раз писали статьи с таким форматированием, то прекрасно знаете, что необходимо делать бесчисленное число раз в редакторе - ввод HTML-тегов для форматирования текста. Поверьте (если не знаете) - это очень неудобно и утомительно.

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

Язык Markdown был создан именно для того, чтобы позволить человеку, набирающему текст в HTML-формате, забыть об HTML-тегах. Вместо этих тегов в Markdown применяются символы-заменители, которые гораздо легче набирать вручную. В этом заключается смысл создания и использования языка Markdown.

Конечно, как любой другой язык-надстройка (например, тот же SASS\SCSS или LESS для CSS), Markdown нуждается в компиляторе, который “переводил” бы текст в формате этого языка в стандартный формат HTML-документа.

В терминологии Markdown такой компилятор называется транслятором и их существует достаточное количество. Существуют платные или бесплатные Markdown-редакторы, в которых уже встроен такой транслятор.

Ниже я рассмотрю два варианта использования языка Markdown - один с помощью специализированных редакторов, второй - с помощью плагина под редактор Sublime Text 2, расширяющего его возможности в плане написания статей с таким синтаксисом.

Редактор MarkdownPad2

Редактор MarkdownPad2 - это герой моего дня сегодня! Бесплатный, интуитивно понятный и простой. Под Windows XP у меня на работе он установился и запустился без проблем. А вот дома на ноутбуке HP Pavilion g6 с Windows 7 установился, но запуститься отказался. Выдал какую-то ошибку, которую мне неохота было выискивать в Google.

В версии MarkdownPad2 (бесплатная) нет многих удобных фишек, которые есть в версии MarkdownPad2 Pro (платная). Но и без них можно прожить, это не так уж “страшно”.

Текст, который вы читаете в данный момент (нетрудно догадаться) набран в этом редакторе с использованием синтаксиса Markdown (как ни странно). Сам синтаксис мне описывать совсем неохота по нескольким причинам.

  1. Первая - там описывать нечего. Он настолько прост и лаконичен, что ему можно и нужно выучиться за полчаса, просто набирая текст в редакторе. Глупо было бы - ведь для цели упрощения написания статей в HTML-разметке язык Markdown и создавался.
  2. Вторая - если у вас все же есть желание почитать статью-описание этого языка, то есть прекрасный вариант - “Технический блог” Владимира Старкова, где помещен материал Основы markdown. Статья совсем свежая, написана автором 13 февраля этого года. Кроме этого, малоизвестная поисковая система Google поможет вам найти целую кучу разнообразных
    1
    
    cheatsheet
    ‘ов по этому языку.

Чтобы не быть голословным, приведу небольшое изображение редактора MarkdownPad2 после первого запуска программы:

MarkdownPad2 после первого запуска

Левая половина окна - это пример синтаксиса Markdown. Правая половина окна - это предварительный просмотр текста, набранного в левой половине. Точно также текст будет выглядеть в окне браузера. Включить или отключить предварительный просмотр можно по клавише F5.

Если хотите точно в этом удостовериться, нажмите клавишу F6 (или самую последнюю иконку на панели инструментов редактора). Создаваемая страница откроется в окне браузера, являющегося браузером по умолчанию в системе.

Давайте быстро пробежимся, как использовать программу и создавать документы в ней:

  • создаем новый документ Ctrl+N
  • вносим в него изменения: текст, изображения и так далее
  • сохраняем файл с расширением
    1
    
    .md
  • экспортируем в HTML-файл Ctrl+Shift+1

Как видим, все просто до предела. Но хочу сказать о паре моментов по работе в этой программе:

  • при форматировании текста лучше использовать панель инструментов редактора, так как синтаксис в редакторе слегка отличается от “официального”;
  • опция экспорта в pdf-формат Ctrl+Shift+2 доступна только в платной версии (а оно нам надо?).

Редактор MarkDown#Editor

Еще один редактор для написания текстов в синтаксисе Markdown - “MarkDown#Editor”. Он также бесплатный, но на моем ноутбуке он запустился без ошибок.

Программа создана автором из Страны Восходящего Солнца по имени Mitsuhiro Hibara. Проект проживает по запоминающемуся адресу http://www.hibara.org (думаю, жители Восточной Украины и юга России меня поймут).

Редактор мне понравился как внешним видом, так и своими возможностями. В нем все просто и интуитивно понятно. Ниже представлен внешний вид программы после первого ее запуска:

MarkdownSharpEditor - первый запуск редактора

Программа умеет экспортировать только в один формат - HTML. Но больше и не нужно, правда?

Плагин MarkdownEditing

Готовые редакторы под Markdown - это прекрасная вещь, но меня не устраивает одно. Я не люблю держать на компьютере целую кучу программ, каждая из которых выполняет только одну задачу.

Я говорю это к тому, что под мой любимый редактор Sublime Text имеется плагин MarkdownEditing, который позволяет создавать документы формата Markdown в этой программе.

Давайте рассмотрим установку, настройку и работу этого плагина в ST2. Надо сказать, что вопрос с плагином под Sublime потратил у меня достаточно времени. Я не знал, как выполнять экспорт готового md-файла в html-файл. Ни Stackoverflow, ни Toster не помогли мне разобраться с данным вопросом. Только прямая свзяь с maintainer’ом плагина помогла разрешить ситуацию.

  1. Установка плагина MarkdownEditing в Sublime Text 2 стандартная - через менеджер пакетов
  2. Перезапускаем редактор Sublime Text 2
  3. Создаем новый документ и устанавливаем для него синтаксис Markdown Shift+Ctrl+P
  4. Пишем в новом документе текст
  5. Сохраняем отредактированный документ как файл с расширением
    1
    
    .md

Плагин MarkdownEditing в Sublime Text 2

А теперь немного внимания! Для меня данный вопрос был камнем преткновения, который заставил добраться с просьбой о помощи до самого maintainer’а плагина - Ali Ayas. Я долго не мог понять простой вещи - MarkdownEditing предназначен только для редактирования файлов с синтаксисом Markdown, о чем говорит само название этого плагина.

Плагин MarkdownEditing не умеет сам конвертировать .md-файлы в файлы формата html. Поэтому, если вы пишите статьи для сайта под управлением WordPress (как в моем случае), вам необходимо поставить на эту CMS плагин для конвертации - WP-Markdown. Затем закидываете статьи в формате

1
.md
под эту CMS, а там уже плагин WP-Markdown автоматически превратит их в html-файлы.

Не знаю, кого как, а меня разочаровал такой подход к делу создания markdown-файлов в Sublime Text 2 с плагином MarkdownEditing.

P.S.

Эмоции немного остыли и я пришел к выводу, что не все так плохо, как казалось с первого взгляда. Более того, имеется плагин MarkdownBuild под Sublime Text 2, который прекрасно справляется с задачей компиляции файла

1
markdown
в html-файл. Устанавливается этот плагин как обычно, через менеджер пакетов.

Настройки плагина минимальные и их можно привести здесь целиком:

{
  "output_html" : true, // сохранить выходной файл html в ту же папку, в которой находиться входной файл markdown
  "open_html_in" : "browser",  // открыть файл html в браузере
  "use_css" : true,
  "charset" : "UTF-8"
}

Единственный момент заключается в том, что настройки плагина MarkdownBuild находятся в файле

1
MarkdownBuild.sublime-settings
, добраться до которого можно только через файловый менеджер или Проводник. В редакторе Sublime Text 2 я не нашел способа открыть настройки этого плагина.

Кроме того, компиляция в этом плагине производится через сочетание клавиш Shift+Ctrl+B, а не Ctrl+B, как описано в документации.

Заключение

Я доволен тем, что познакомился с языком Markdown. С ним действительно создавать статьи под сайт гораздо легче, быстрее и удобнее. Писать статьи или обзоры с помощью Markdown - одно удовольствие.

Редактором-победителем для меня стала программа MarkdownPad - быстрая, удобная и надежная. Тот момент, что она отказалась установиться на моем ноуте под Windows 7 роли не играет, как мне кажется.

На этом все.


Приступаем к изучению Bootstrap Twitter.

Лично мое мнение, что любой веб-мастер, какого-бы он класса и квалификации он не был, обязан иметь о нем представление. И должен уметь создавать проекты с помощью этого продукта.

Итак, Bootstrap Twitter. Прежде всего - почему двойное название и почему Twitter? На оба вопроса одно объяснение - этот фреймворк создала команда, которая ранее создала еще один проект - Twitter. Хорошо, тогда еще один вопрос - а что такое фреймворк? Как говорит всезнающая Википедия, фреймворк, это:

… программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.

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

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

C английского языка фреймворк переводиться как “каркас”. И этим уже можно все сказать, в принципе. Но, еще раз внимательно почитаем Википедию:

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

Вот почему некоторые веб-дизайнеры не любят этот фреймворк, но это дела не меняет. Продолжим знакомиться с Bootstrap.

На момент написания статьи имелось две версии этого фреймворка - v3.0.2 и v2.3.2. Здесь мы начнем изучение с версии v2.3.2, а потом плавно (я надеюсь) перейдем к более свежей и современной v3.0.2. Кстати, сразу стоит упомянуть, что в Сети есть несколько русскоязычных ресурсов, посвященных Bootstrap.

Но, насколько я понял, оба они являются локализованными (с разной степенью кривизны) версиями одного сайта-первоисточника - http://getbootstrap.com/. Видно, авторы этих проектов сильно торопились со своими детищами. Я рекомендую пользоваться оригиналом и в данной статье мы так и будем поступать, по мере сил.

Скачать готовый фреймворк Bootstrap можно со страницы домашнего проекта (откуда же еще?) в виде архива. Если распаковать скачанный архив на локальном компьютере, то увидим, что он состоит из трех папок:

1
css
,
1
js
,
1
img
. Первые две папки обязательны при создании любого нового проекта на Bootstrap.

Содержимое папки CSS:

bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css

Здесь расположены четыре CSS-файла, но на самом деле их два. Различия между

1
bootstrap.css
и
1
bootstrap.min.css
,
1
bootstrap-responsive.css
и
1
bootstrap-responsive.min.css
только в том, что первый вариант - это
1
development
-версия файла, которая предназначена для внесения в нее изменений при соответствующей квалификации программиста.

А второй вариант - это

1
production
-версия файла, в которую изменений вносить не планируется и практически этого невозможно сделать, так как в этом файле убраны все комментарии, отступы, табуляции и тому подобное, что делает этот файл трудночитаемым для человека. Зато размер данного файла намного меньше, чем у
1
development
-версии, поэтому главная цель этого файла - просто подключить его к проекту для дальнейшей работы.

Кстати, стоит упомянуть, что в фреймворке Bootstrap вместо сброса стилей через файл

1
reset.css
от Эрика Мейера используется приведение всех браузеров к одному общему знаменателю с помощью файла
1
normalize.css
. Помимо этого, используются компоненты известного HTML5 Boilerplate.

Файл

1
bootstrap.css
- это главный файл стилевых правил CSS для фреймворка Bootstrap, без него этот фреймворк - просто не фреймворк. В этом файле находится коллекция готовых CSS-классов, которые подключаются к элементам HTML-документа по мере необходимости и тем самым форматируют HTML-страницу.

Файл

1
bootstrap-responsive.css
- единственная задача данного файла сделать HTML-страницу, к которой подключается этот файл, адаптивной (
1
responsive
). Что такое адаптивный дизайн, вы можете легко найти в Интернете, на сегодняшний день это тема №1 в веб-дизайне.

Содержимое папки JS:

bootstrap.js
bootstrap.min.js

Также, как и в случае со стилевыми правилами, в этой папке присутствует только один файл -

1
bootstrap.js
, тогда как
1
bootstrap.min.js
- это его минимизированная
1
production
-версия. Файл
1
bootstrap.js
- это набор готовых js-сценариев, задача которых является вспомогательной в деле создания HTML-компонентов.

Дело в том, что фреймворк Bootstrap это не только набор CSS-правил, но и компонентов. Готовая панель навигации (

1
html+css+js
), форма поиска с кнопкой внутри (
1
html+css+js
), рабочая панель вкладок (html+css+js) и так далее - это все HTML-компоненты. И как уже должно быть понятно, роль js-сценариев здесь - помочь сделать эти компоненты полностью готовыми к работе.

Содержимое папки IMG:

glyphicons-halflings.png
glyphicons-halflings-white.png

Единственная папка с изображениями в проекте Bootstrap. Если вы ее откроете (предпочтительно в Adobe Photoshop), то увидите, что это обычный спрайт (sprite) - набор готовых стилизованных иконок.

Первый файл

1
glyphicons-halflings.png
- там иконки черные, а второй файл
1
glyphicons-halflings-white.png
- там иконки точно такие же, но только белого цвета (контраст).

Что такое CSS-спрайт, я тоже объяснять не буду - в Интернете есть подробная информация по этой технологии. Хотя, когда я впервые с ней познакомился, у меня было желание ее описать у себя - это интересно. Но потом время ушло, для меня все стало просто и обыденно в этом плане типа “да чего там писать - и так все просто и понятно.”

C содержимым архива и проекта Bootstrap Twitter познакомились. Теперь рассмотрим, как подключать данный фреймворк к своему рабочему проекту и пользоваться всеми его “вкусностями”.

Создаем папку с новым проектом и туда распаковываем архив с Bootstrap. Первое - нам необходим HTML-шаблон с обязательным условием -

1
DOCTYPE HTML 5
, то есть, так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

К нему подключаем CSS и JS-файлы из распакованного архива и сохраняем в ту же папку с будущим проектом. В принципе, все готово для дальнейшей работы …

На этом все.


При верстке HTML-шаблонов часто ловил себя на мысли, что редактору Sublime Text не хватает одной удобной вещи - инструмента для выбора цвета в процессе кодинга.

Допустим, есть блок

1
div
и мне необходимо сделать для него произвольную фоновую заливку через CSS-свойство
1
background-color
. Откуда мне взять значение нужного цвета в HEX-формате (про RGBA уже молчу)? Если скажете, что держать в голове значения этих цветов, то насмешите (можно помнить 5-10 значений, не больше). Хранить в виде таблицы цвета и их значения в HEX\RGBA? Этот список вечно куда-то девается и в нужный момент его постоянно нет под рукой.

В ходе своей деятельности я постоянно пробую новые HTML-редакторы, платные и бесплатные. Платные редакторы, конечно, более “отшлифованные” и удобные в работе. Так вот, в таких редакторах, как JetBrains WebStorm, Adobe Dreamweaver, EmEditor есть функция автоматического перехвата события, когда в процессе кодинга я пытаюсь добавить цвет для элемента:

Функция выбора цвета в редакторе JetBrains WebStorm

Классная и удобная штучка, не правда ли? Почему бы и для редактора Sublime Text не прикрутить подобную (ведь изначально в нем нет такой надстройки)? Совсем недавно я зарегистрировался на сервисе Toster.ru, который является детищем Харба и сделан аналогом известного StackOverflow.

Незаменимая вещь для кодера - там можно найти ответы на все вопросы, причем вопросы практического характера, что особенно ценно. То есть, другими словами, Toster.ru - это русский StackOverflow. И вот, один из вопросов на этом сервисе был посвящен возможности выбора цвета в редакторе Sublime Text. Ответили там кратко, но точно - это плагин “ColorPicker”.

Ставится “ColorPicker” быстро и стандартно для Sublime Text - через менеджер пакетов. Кстати, есть достаточно интересный адрес - https://sublime.wbond.net/, который является online-репозиторием для редактора Sublime Text. Чем удобен этот адрес - можно найти и почитать о любом из плагинов под этот редактор.

Если интересно почитать более подробно об плагине “ColorPicker”, можно зайти на страницу этого проекта на GitHub - https://github.com/weslly/ColorPicker. После установки плагин “ColorPicker” не слышно и не видно в редакторе Sublime Text.

Чтобы вызвать его для выбора цвета, нужно нажать сочетание клавиш:

  • для Windows: Ctrl+Shift+C
  • для OS X: Cmd+Shift+C
  • для Linux: Ctrl+Shift+C

Появится стандартное окно выбора цвета под операционную систему Windows (на Mac OS X я еще не заработал):

Окно плагина ColorPicker в редакторе Sublime Text

Выбираем и вставляем нужный цвет. На странице проекта на GitHub https://github.com/weslly/ColorPicker можно увидеть скриншоты окна плагина под другие операционные системы - OS X, Linux OS, так как этот плагин можно установить и под эти платформы.

Все прекрасно. Только один момент - вызывать этот плагин придется все же “вручную”, через сочетание клавиш.

Наверное, как-то и можно “повесить” плагин “ColorPicker” на определенное событие в редакторе Sublime Text, как это сделано в том же JetBrains WebStorm. Но как это сделать - я пока не знаю. Наверное, наподобие создания сниппетов в Sublime Text?

На этом все.


В очередной раз возвращаюсь к видеокурсу от TutsPlus под названием “TutsPlus - PSD To WordPress Minimal Portfolio”, для себя нашел там много нового и интересного.

На этот раз вопрос будем касаться свойства

1
-webkit-font-smoothing
. При создании и стилизации HTML-шаблона автор курса Adi Purdila “употребил” это свойство и вкратце сказал, что с ним шрифт будет смотреться лучше.

Конечно, это не объяснение свойства

1
-webkit-font-smoothing
, поэтому я выкроил специально для этого вопроса время, чтобы разобраться подробнее. Первым делом отправился на htmlbook.ru - незаменимый источник знаний для html-верстальщика.

Естественно, там нашлась подробная информация по поводу сглаживания шрифтов и управлению данным процессом через CSS. Статья называется “Сглаживание шрифтов в Safari” и она послужила основой для моей собственной статейки.

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

А вот способ (и это второй момент), с помощью которого достигается такое улучшение начертания шрифтов, не так очевиден. Можно даже сказать больше - он совсем неожиданный. Раньше я случайно пару раз наблюдал такую картину, но мне тогда казалось, что это “глюк” монитора, его неспособность правильно “отрисовать” буквы шрифта.

Теперь-то я знаю, что такое отображение шрифта сделано намеренно, с помощью окрашивания пикселей, расположенных на краях букв, в разные цвета. То есть, получается, что цвет пикселей для всей буквы шрифта неоднородный (допустим - черный), а составлен из нескольких цветов.

Но вот парадокс - человеческий глаз не замечает данного факта, а как раз наоборот - такое отображение букв шрифта ему кажется более четким и плавным. Чтобы дальше не расписывать, что к чему и почем, приведу картинку, которую я нагло “свистнул” с сайта htmlbook.ru, ибо самому не получилось создать подобную:

Увеличенная буква шрифта с эффектом сглаживания

В популярных операционных системах такая технология используется достаточно давно под разными названиями, например в Windows она имеет запатентованное имя ClearType. Однако, с помощью свойства CSS

1
-webkit-font-smoothing
можно управлять способом отображения шрифтов по этой технологии в браузерах.

Как видно из браузерного префикса, данное свойство будет работать только под движком WebKit (Chrome, Safari и с недавнего времени - Opera). Но, чтобы свойство

1
-webkit-font-smoothing
заработало в браузере, в его настройках нужно выставить отображение шрифтов, отличное от стандартов операционной системы Windows.

Поэтому, в браузере Firefox такую настройку можно не искать - ее там просто нет. А вот в Safari такая настроечка есть (в Chrome мои попытки также оказались безуспешными):

Настройка Safari для управления сглаживанием шрифта

Ну, хватит про браузеры - перейдем к CSS и свойству

1
-webkit-font-smoothing
, ради которого и затеялась данная статья. Это свойство может принимать три значения:

  • 1
    
    none
    - сглаживание вообще отключено;
  • 1
    
    antialiased
    - средняя степень сглаживания;
  • 1
    
    subpixel-antialiased
    - сильная степень сглаживания.

И ниже приведу все три примера отображения текста в браузере Safari для каждого из значений свойства

1
-webkit-font-smoothing
. Но сначала установлю настройку сглаживания шрифта в этом браузере на “Среднее - оптимально для плоских экранов”:

Три примера отображения -webkit-font-smoothing в Safari

Для первого случая

1
-webkit-font-smoothing: none
это вообще жуть - ничего не читается совсем, поэтому отбрасываем и забываем о нем (в браузерах Firefox, Chrome и других все будет отображаться правильно, ибо они не имеют подобной настройки, как Safari).

Второй случай

1
-webkit-font-smoothing: antialiased
выглядит очень привлекательно - начертание сглаженное и четкое одновременно, приятно читать.

Третий случай

1
-webkit-font-smoothing: subpixel-antialiased
похож на второй, но текст выглядит немного жирным, что не так приятно, как в предыдущем случае.

Вывод:

1
-webkit-font-smoothing: antialiased
- это наш выбор. Другое дело, что применение этого свойства ограничено только браузерами на движке WebKit. И помимо этого, мало кто из пользователей знает о возможности управления отображением сглаженного шрифта в браузерах такого типа.

Из браузерного префикса

1
-webkit-
ясно, что основное свойство
1
font-smoothing
только в проекте. Конечно, статья “Сглаживание шрифтов в Safari” была написана в далеком 2011 году, за это время может все измениться. Но как обстоят дела на сегодняшний день, я сказать не могу, ибо времени выяснить такой вопрос у меня пока нет. Но, судя по тому, как добавлял свойство
1
-webkit-font-smoothing
в HTML-шаблон автор Adi Purdila:

-webkit-font-smoothing: antialiased;

… дела ушли не намного вперед.

На этом все.