Главная » Вконтакте » Вы здесь

Как изменить шрифт ВКонтакте

Как изменить шрифт ВКонтакте

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

Меняем шрифт ВК

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

Рекомендуем вам прочесть дополнительные статьи по теме изменения шрифта в рамках сайта VK, чтобы знать обо всех возможных вариантах решения вопроса.

Читайте также:
Как масштабировать текст ВК
Как сделать жирный шрифт ВК
Как сделать зачеркнутый текст ВК

Что же касается предлагаемого решения, то оно состоит в использовании специального расширения Stylish для различных интернет-обозревателей. Благодаря такому подходу вам предоставляется возможность использовать и создавать темы на основе базовой таблицы стилей сайта VK.

Указанное дополнение одинаково работает практически во всех современных веб-браузерах, однако мы в качестве примера затронем исключительно Google Chrome.

Учтите, что в процессе следования инструкции вы, при должных знаниях, можете существенно изменить весь дизайн сайта ВК, а не только шрифт.

Устанавливаем Stylish

Приложение Stylish для интернет-обозревателя не имеет официального сайта, а скачать его можно непосредственно из магазина дополнений. Все возможности расширения распространяются на полностью бесплатной основе.

Перейти на сайт магазина Chrome

  1. Используя приведенную ссылку, перейдите на главную страницу магазина дополнений для веб-браузера Google Chrome.
  2. Переход на главную страницу магазина дополнений для интернет обозревателя Google Chrome

  3. С помощью текстового поля «Поиск по магазину» найдите расширение «Stylish».
  4. Поиск расширения Stylish в интернет магазине через интернет обозреватель Google Chrome

    Для упрощения поиска не забудьте установить точку напротив пункта «Расширения».

  5. Воспользуйтесь кнопкой «Установить» в блоке «Stylish – кастомные темы для любого сайта».
  6. Установка расширения Stylish в интернет магазине через интернет обозреватель Google Chrome

  7. В обязательном порядке подтвердите интеграцию дополнения в ваш веб-браузер, кликнув по кнопке «Установить расширение» в диалоговом окне.
  8. Подтверждение установки расширения Stylish в интернет магазине через интернет обозреватель Google Chrome

  9. После выполнения рекомендаций вы будете автоматически перенаправлены на стартовую страницу расширения. Отсюда вы можете воспользоваться поиском уже готовых тем или создать совершенно новое оформление для какого-либо сайта, включая ВКонтакте.
  10. Главная страница расширения Stylish в интернет обозревателе Google Chrome

    Рекомендуем ознакомиться с видеообзором этого дополнения на главной странице.

  11. Кроме того, вам предоставляется возможность произвести регистрацию или авторизацию, однако это никак не влияет на работу данного расширения.
  12. Возможность авторизации в расширении Stylish в интернет обозревателе Google Chrome

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

На этом процесс установки и подготовки дополнения заканчивается.

Используем готовые стили оформления

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

Читайте также: Как устанавливать темы оформления ВК

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

Перейти на главную страницу Stylish

  1. Откройте главную страницу расширения Stylish.
  2. Переход на главную страницу расширения Stylish через интернет обозреватель Google Chrome

  3. С помощью блока с категориями «Top Styled Sites» в левой части экрана перейдите к разделу «Vk».
  4. Переход к разделу Vk на главной странице расширения Stylish через интернет обозреватель Google Chrome

  5. Найдите тему, которая вам больше всего нравится, и кликните по ней.
  6. Поиск темы оформления для Vk на странице расширения Stylish через интернет обозреватель Google Chrome

  7. Воспользуйтесь кнопкой «Install Style», чтобы установить выбранную тему.
  8. Использование кнопки Install Style на странице расширения Stylish через интернет обозреватель Google Chrome

    Не забудьте подтвердить установку!

  9. Если захотите поменять тему, то вам потребуется деактивировать ранее использованную.
  10. Деактивация темы оформления в расширении Stylish через интернет обозреватель Google Chrome

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

Работаем с редактором Stylish

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

  1. Перейдите к сайту ВКонтакте и находясь на любой странице данного ресурса, кликните по иконке расширения Stylish на специальной панели инструментов в браузере.
  2. Переход к настройкам расширения Stylish на главной странице на сайте ВКонтакте

  3. Открыв дополнительное меню, кликните по кнопке с тремя вертикально расположенными точками.
  4. Переход к дополнительному меню настроек расширения Stylish в интернет обозревателе Google Chrome

  5. Из представленного списка выберите пункт «Создать стиль».
  6. Переход к редактору стилей оформления в расширении Stylish через интернет обозреватель Google Chrome

Теперь, когда вы оказались на странице со специальным редактором кода расширения Stylish, можно приступать к процессу изменения шрифта ВКонтакте.

  1. В поле «Код 1» вам нужно ввести следующий набор символов, который впоследствии станет основным элементом кода в рамках этой статьи.
  2. body {}

    Ввод начального кода в редактор Stylish при изменении шрифта на сайте ВКонтакте

    Данный код подразумевает то, что текст будет изменен в рамках всего сайта ВКонтакте.

  3. Установите курсор между фигурными скобками и дважды нажмите клавишу «Enter». Именно в созданную область вам нужно будет помещать строчки кода из инструкции.

    Создание табуляции для основного кода в редакторе Stylish при изменении шрифта на сайте ВКонтакте

    Рекомендацией можно пренебречь и попросту писать весь код в одну строку, однако это нарушение эстетики может в будущем вас запутать.

  4. Для того, чтобы изменить непосредственно сам шрифт, вам необходимо воспользоваться следующим кодом.
  5. font-family: Arial;

    Использование кода font family в редакторе Stylish при изменении шрифта на сайте ВКонтакте

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

  6. Чтобы поменять размеры шрифта, включая любые цифры, на следующей строке воспользуйтесь этим кодом:
  7. font-size: 16px;

    Использование кода font size в редакторе Stylish при изменении шрифта на сайте ВКонтакте

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

  8. Если у вас есть желание украсить готовый шрифт, вы можете воспользоваться кодом для изменения стиля текста.

    font-style: oblique;

    Использование кода font style в редакторе Stylish при изменении шрифта на сайте ВКонтакте

    В данном случае значение может быть одно из трех:

    • normal – обычный шрифт;
    • italic – курсив;
    • oblique – наклонный.
  9. Для создания жирности вы можете использовать следующий вариант кода.

    font-weight: 800;

    Использование кода font weight в редакторе Stylish при изменении шрифта на сайте ВКонтакте

    Указанный код принимает следующие значения:

    • 100-900 – степень жирности;
    • Bold – полужирный текст.
  10. В качестве дополнения для нового шрифта вы можете изменить его цвет, вписав следующей строчкой специальный код.
  11. color: gray;

    Использование кода color в редакторе Stylish при изменении шрифта на сайте ВКонтакте

    Здесь могут быть указаны любые существующие цвета с помощью текстового названия, RGBA- и HEX-кода.

  12. Чтобы измененный цвет стабильно отображался на сайте ВК, вам потребуется дописать к началу созданного кода, сразу после слова «body», перечисляя через запятую, некоторые теги.
  13. body, div, span, a

    Изменение цвета шрифта для дополнительных тегов в редакторе Stylish при изменении шрифта на сайте ВКонтакте

    Рекомендуем воспользоваться нашим кодом, так как он захватывает все текстовые блоки на сайте ВК.

  14. Чтобы проверить, как созданное оформление отображается на сайте ВК, в левой части страницы заполните поле «Введите название» и нажмите кнопку «Сохранить».
  15. Сохранение оформления для ВК в редакторе Stylish при изменении шрифта на сайте ВКонтакте

    Обязательно установите галочку «Включено»!

  16. Отредактируйте код, чтобы оформление полностью удовлетворяло вашим представлениям.
  17. Дополнительное редактирование кода оформления в редакторе Stylish при изменении шрифта на сайте ВКонтакте

  18. Сделав все правильно, вы увидите, что шрифт на сайте ВКонтакте изменится.
  19. Успешно измененный шрифт на главной странице на сайте ВКонтакте

  20. Не забудьте воспользоваться кнопкой «Завершить», когда стиль будет полностью готов.
  21. Использование кнопки завершить в редакторе Stylish при создании стиля для сайта ВКонтакте

Надеемся, в процессе изучения статьи у вас не возникло трудностей с пониманием. В противном случае мы всегда рады вам помочь. Всего хорошего!

Мы рады, что смогли помочь Вам в решении проблемы.

Опишите подробнее, что у вас не получилось

Помогла ли вам эта статья?

Да Нет


Еще статьи по данной теме:


Поделиться статьей в социальных сетях:

Задайте вопрос или оставьте свое мнение