Как изменить стили шрифтов на сайте Weebly? »WebNots

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

2. Использование внешних шрифтов

Шрифты не обязательно должны использоваться для текстовых элементов. Существуют шрифты, используемые для масштабируемой векторной графики (SVG) для добавления значков на ваш сайт. Font awesome и Glyphicons — несколько примеров значков SVG, используемых для различных целей. Нет необходимости размещать эти шрифты на вашем сайте; вы можете просто добавить соответствующую ссылку в таблицу стилей в разделе «Код заголовка» настроек вашего сайта. Ниже описано, как связать значки font awesome с вашим сайтом.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Теперь вы можете вставить на свой сайт любую иконку со шрифтом, используя элемент «Вставить код». Узнайте больше о том, как использовать отличные шрифтовые иконки на сайте Weebly.

Использование параметра CSS @import

Вы можете напрямую импортировать таблицы стилей внешних шрифтов в разделе «Тема> Изменить HTML / CSS> Ресурсы> main_style.css”Файл, используя параметр @import, как показано ниже:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Это помогает импортировать шрифты Open Sans Google, которые можно использовать для различных элементов вашего сайта. Например, добавление приведенного ниже кода в «main_style.css» изменит весь текстовый контент на вашем сайте на Open Sans.

body { font-family: 'Open Sans', sans-serif; }

Убедитесь, что в первой строке вашего файла «main_stlye.css» указан @import. Обычно этот метод используется для импорта стилей шрифтов из внешних служб, таких как шрифты Google.

3. Размещение шрифтов на вашем сайте Weebly

Как правило, одна и та же политика безопасности происхождения не позволяет использовать ограниченные ресурсы, такие как шрифты, используемые в одном домене, для ссылки на другом сайте. Чтобы использовать настраиваемые внешние шрифты на своем сайте Weebly, вам необходимо иметь файлы шрифтов и загружать их на свой сайт Weebly. Поскольку Weebly позволяет получить доступ к исходным файлам, перейдите к «Тема> Редактировать HTML / CSS> Активы”И загрузите файлы шрифтов.

Загрузить файлы шрифтов в Weebly

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

<link rel="stylesheet" href="http://yoursite.weebly.com/files/theme/font-file-name.css">

Использование параметра CSS @ font-face

Если вы размещаете шрифт на своем сайте Weebly и у вас нет файла CSS для связывания, можно использовать свойство CSS @ font-face. Вы можете увидеть использование @ font-face, открыв URL-адрес шрифта Google, используемый в вышеуказанном методе @import.

Использование шрифта в Google Fonts

Загрузите все файлы шрифтов в раздел «Assets» и свяжите их с помощью параметра CSS @ font-face в разделе «main_style.css».

@font-face {
font-family: 'Custom_Font';
src: url('customfont.woff2') format('woff2'),
url('customfont.woff') format('woff'),
url('customfont.ttf') format('truetype');
}

После этого вы можете определить использование на уровне элемента, определив CSS.

body { font-family: 'Custom_Font', Fallback, sans-serif; }

4. Настройка всех похожих элементов на странице

Все вышеперечисленные методы изменят стиль, влияющий на весь сайт. Бывают ситуации, когда вы можете захотеть изменить все похожие элементы только на странице. В этом случае вам нужно найти соответствующий класс CSS для настройки элемента. Предположим, вы хотите изменить семейство шрифтов всего текста абзаца на странице на моноширинный. Добавьте следующий код в заголовок своей страницы в разделе «Страницы> Настройки SEO> Код заголовка»Меню.

<style>
.paragraph {
font-family:  monospace;
}
</style>

Абзац — это класс CSS, используемый для текстовых элементов. Вы можете найти CSS-класс элемента, просмотрев параметр «Проверить элемент» в своем браузере.

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

5. Настройка стиля шрифта отдельного элемента

Вам также может потребоваться изменить свойства шрифта отдельного текста или элемента заголовка. В таких случаях перетащите элемент «Вставить код» и добавьте собственный HTML-код со встроенными стилями CSS.

Встроенные стили будут действовать в редакторе; следовательно, вы можете видеть, что изменения вступают в силу мгновенно на странице. Ниже приведен встроенный код CSS для добавления настраиваемого заголовка H1:

<h1 style="text-align:left;font-size:28px;color:red;font-family:arial;"> This is a first Heading for Your Page</h1>