Как изменить шрифт на всем сайте ucoz

Скрипты, кнопки, шаблоны для uCoz. Игры, читы, плагины для CS:S. Программы для ПК
Как изменить шрифт сайта в Ucoz?

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

CSS — это таблица стилей, это файл в котором хранятся все указания — размеры, цвет, жирность шрифтов, как должны выглядеть ссылки и многое другое. Современные сайты верстаются с помощью CSS и если его отключить, то останется «голая страница«, в этой статье я постараюсь объяснить как изменить шрифт в Ucoz и не навредить сайту.

Перейдите:

Панель управленияРедактор страницУправление дизайном модуляТаблица стилей (CSS)

Вот так выглядит часть таблицы стилей CSS моего шаблона:

Там где элемент «body» указаны основные стили, нас в данном случае (смена шрифта) интересуют вот эти две строки:

font: 12px ‘Arial’;
color: #555555;

В части шаблонов (табличных) CSS отличается, там нужно искать такую строку:

В первом типе CSS:

12px — размер шрифта в пикселях (меня 12px устраивает)
Arial» — шрифт (мне больше нравится шрифт «Tahoma«)
#555555 — цвет шрифта (устраивает)

Во втором типе CSS:

verdana,arial,helvetica — это перечисление нужных шрифтов, если первого не окажется на компьютере у посетителя сайта, то будет использован второй и т.д.
10pt — размер шрифта в пунктах, я использую пиксели (12px), так как они более предсказуемы и выглядят одинаково на компьютерах с разным разрешением
экрана.

Все эти данные можно менять, при этом не нарушайте целостность кода — не убирайте скобочки, кавычки, двоеточия и др., если не знаете для чего они служат. После смены сохраните CSS и обновите сайт вместе с кэшэм — CTRL+F5 — вы увидите результаты изменений.

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

Самый простой способ — поиск по CSS с ключевым словом «font«, если при поиске видите указание font-size:10px; или другие вариации, то можете сменить на нужное и посмотреть, что получилось на сайте. Можно искать по классам конкретных элементов на сайте, но вUcoz большое нагромождение кодов, поэтому новичку будет затруднительно найти нужный класс. Сменить основной шрифт на сайте с помощью указанной инструкции можно, а если хотите большего, то изучайте основы CSS.

  • Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS

Как изменить шрифт на сайте

Kosten

Дата: Понедельник, 2016-04-18, 12:18 | Сообщение 1

Оффлайн

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

Страна: (RU)

Kosten

Дата: Понедельник, 2016-04-18, 13:24 | Сообщение 2

Оффлайн

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

Страна: (RU)

Angerfist

Дата: Понедельник, 2016-04-18, 15:10 | Сообщение 3

Оффлайн

Как поставить свой шрифт на сайт uCoz я примерно также менял шрифт на сайте, с Google Fonts скачал и залил на сайт, не стал подключать оттуда шрифты, показалось затормаживают. И ещё, почему они должны отражаться на выдачу?)) вряд ли, но вот ещё один конфуз с которым разбираюсь, залил на сайт все форматы шрифта (я взял Play) и проверил на эмуляторах мобильных устройств, шрифт вместо Play отображается что то похожее на Georgia) И ещё советую всё таки с Google Fonts скачивать, а то с одного популярного сайта качнул шрифт с багами.


No regrets

Сообщение отредактировал
AngerfistПонедельник, 2016-04-18, 15:11

Страна: (RU)

workman

Дата: Понедельник, 2016-04-18, 16:01 | Сообщение 4

Оффлайн

Не нужно ставить ссылки с других сайтов… Проще найти нужный шрифт и поставить самому через ФМ и CSS типа так.

Код

@font-face {
    font-family: Pompadur; /* Гарнитура шрифта */
    src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
   }

Ссылка для того чтобы скачать для своего сайта шрифтыс сайта Yraaa.ruКак установить? Так все просто до нельзя:

Например скачал шрифт Marmelad, заливаешь ФМ и ставишь так в CSS в самый вверх

Код

@font-face {font-family: Marmelad;src: url(/Marmelad.ttf);}

Ну и если на весь сайт где в стилях стоит body, тавишь

Код

body {…………. font-family: Marmelad;}

Сообщение отредактировал
workmanПонедельник, 2016-04-18, 16:34

Страна: (RU)

Kosten

Дата: Понедельник, 2016-04-18, 18:04 | Сообщение 5

Оффлайн

От души, реально не знал, что так мудрена.

Как смотрите, если на этот сайт поставить шрифт Play

Страна: (RU)

Kosten

Дата: Понедельник, 2016-04-18, 18:17 | Сообщение 6

Оффлайн

Нужно тему замутить и шрифтов накидать, понял как их ставить, не просто в начале прописать нужно, а по всему CSS заменить. biggrin

Страна: (RU)

Angerfist

Дата: Понедельник, 2016-04-18, 19:27 | Сообщение 7

Оффлайн

Kosten, кстати у меня тоже шрифт Play, Вот подключал сверху так:

Код

@font-face {
    font-family: «PlayRegular»;
    src: url(«/fonts/Play/PlayRegular.eot»);
    src: url(«/fonts/Play/PlayRegular.eot?#iefix»)format(«embedded-opentype»),
    url(«/fonts/Play/PlayRegular.woff») format(«woff»),
    url(«/fonts/Play/PlayRegular.ttf») format(«truetype»);
    font-style: normal;
    font-weight: normal;
}


No regrets

Страна: (RU)

Angerfist

Дата: Понедельник, 2016-04-18, 19:30 | Сообщение 8

Оффлайн

workman, чуть не забыл, спасибо за тот сервис с меню, оттуда взял исходники для responsive меню!


No regrets

Страна: (RU)

Kosten

Дата: Понедельник, 2016-04-18, 19:54 | Сообщение 9

Оффлайн

Angerfist, об этом тоже подумал, но решил сейчас просто одно слово вывести «Комментарий» не знаю что получиться.

Страна: (RU)

Kosten

Дата: Понедельник, 2016-04-18, 20:02 | Сообщение 10

Оффлайн

Что то не вышло, все нужно через css.
А сделал:

Код

<style>
  @font-face {
  font-family: Pompadur; /* Гарнитура шрифта */
  src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
  }
  </style>

Angerfist, иногда захожу на ваш сайт, и реально только сейчас заметил, что шрифт Play, только на жирном заметно.

Страна: (RU)

Сопрано

Дата: Понедельник, 2016-04-18, 20:56 | Сообщение 11

Оффлайн

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

Страна: (RU)

workman

Дата: Понедельник, 2016-04-18, 22:03 | Сообщение 12

Оффлайн

Цитата Angerfist ()

чуть не забыл, спасибо за тот сервис с меню, оттуда взял исходники для responsive меню!

Да не за что. Всегда рад, нормальным пользователям помочь не делом так советом или просто поделиться сервисом

Страна: (RU)

workman

Дата: Понедельник, 2016-04-18, 22:04 | Сообщение 13

Оффлайн

Цитата Kosten ()

Что то не вышло, все нужно через css.

Что именно не получилось то? Где именно?

Страна: (RU)

Kosten

Дата: Понедельник, 2016-04-18, 22:43 | Сообщение 14

Оффлайн

Angerfist, подсказал, через стили делать, а сам css и шрифт брать на сайте, вообщем все подробно здесь описано, в комментариях.

Страна: (RU)

Tergran

Дата: Понедельник, 2016-04-18, 23:51 | Сообщение 15

Оффлайн

Нужная информация, то скрипты уже все установлены, теперь нужно в порядок сайт приводить.

Страна: (RU)

                     Продолжаем тему «Изменить меню«. Уже сделаны основные преобразования: — добавлены новые пункты меню; — исправлены старые названия строк; — фон меню стал другого цвета.  Но приглядимся к нему   внимательнее.     Что   мы   видим?,   Screen 1.     Буквы   маленькие,   бледненькие,   

                                                 
                                                                                      Screen 1.

цвет   вообще непонятный. Вывод — надо переделывать шрифт полностью:  1.  увеличить размер букв;  2. изменить их цвет. Как это сделать? Открываем как всегда => Панель Управления     =>    Управление  дизайном    =>    Таблица  стилей  (CSS):

                ПервоеНаходим там раздел /* Site Menus */. Последняя, самая длинная в разделе строчка (на нашей Таблице стилей находится на 82 строчке),  на конце которой ищем такую фразу ( font-size: 10pt; ), скобки не считать, Screen 2, подчеркнуто красным

                                                  
                                                                                     Screen 2.

цветом. Цифра 10 обозначает размер шрифта, меняем её на 12pt  и делаем «Сохранить«.  Перегружаем сайт и видим, что строчки меню стали вполне нормального размера.  Однако заголовок «Меню сайта» остался прежним.  Значит его тоже надо увеличить.

                 Второе — возвращаемся  в раздел /* General Style */. Вспоминаем статью Заменить цвет меню и боковых блоков сайта, находим ту самую строку, где меняли КОД верхней картинки блока. В нашей таблице, как мы уже говорили в выше названной статье, она находится под номером 13. У Вас она может находиться в другом месте. Но она есть. Там находим такую же фразу ( font-size: 10pt; ), скобки не считать.  Так же меняем циферки. «Сохранить«.                
                 Третье — на этой же строке находим фразу ( color: #000; ) с КОДом цвета. Это должен быть цвет заголовка меню и других боковых блоков. Как действовать в таком случае Вы уже знаете (статья Изменить фон сайта uCoz и другие). Меняем КОД. Если вдруг цвет заголовков не изменился ищем или причину, или методом «тыка» нужный КОД. Заметим, цвет заголовка меняется на всех блоках сразу, Screen 3. 

                                                  
                                                                                     Screen 3.Четвертый шаг — размер шрифта изменили, заголовок изменили, остался на очереди цвет шрифта меню. Находим в Таблице стилей (CSS) раздел  /* Site Menus */, Screen 4. У нас строки 73, 74,
                                                                                     Screen 4.

75. Меняем КОД цвета на красный (FF0000). Незабываем почистить cuci в настройках браузера. Если цвет не меняется ищем КОД методом «тыка». В нашем случае цвет шрифта меню изменился на красный, Screen 5. Обратите внимание цвет меняется только в блоке меню, все остальные блоки остались
                                                                                      Screen 5.

прежними. С прежним цветом осталась и строка меню «Главная страница». Это потому, что данная строка активирована. Для того, чтобы изменить её цвет делаем:

                         Пятый шаг — меняем КОД color на строках 76, 78, 79 (ещё раз повторяем — так как все шаблоны разные у Вас могут быть другие строки, ищите…), Screen 6. Кроме того, при наведении стрелки курсора на строку меню, она сменит свой окрас на такой же цвет.
                                                                                       Screen 6.

И смех, и грех:            

Понравилась статья? Поделить с друзьями:

Читайте также:

  • Как изменить шрифт на всем компьютере виндовс 10
  • Как изменить шрифт на виндовс 7 максимальная
  • Как изменить шрифт на виндовс 10 про
  • Как изменить шрифт на виндовс 10 на стандартный
  • Как изменить шрифт на виндовс 10 на свой

  • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии