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

13 января 2017 в 18:15

Русификация библиотеки openGLCD для Arduino

• Электроника для начинающих

Написание русскоязычного текста на графических дисплеях с контролером ks0108 или его аналогами все еще представляет существенные трудности. Библиотека openGLCD, которую рекомендуют официальные сайты Arduino, в оригинальной комплектации последней на данный момент версии не содержит никаких кириллических шрифтов, кроме шрифта cp437font8x8. На практике он малопригоден, потому что в русскоязычной части поддерживает кодировку Win-1251 . Следовательно, чтобы выводить символы таким шрифтом, их нужно либо вставлять в текст восьмеричными или шестнадцатеричными кодами (и при этом остаются неясности со строчной буквой «я», как указывает в комментарии сам создатель шрифта), либо все равно писать отдельную функцию перекодировки, как это сделал arduinec для библиотеки Adafruit-GFX.

Кроме всего прочего, cp437font8x8 крупноват для экранчиков 128х64 точки. Оптимальным размером шрифта для вспомогательных надписей на таком дисплее остается System5x7. Мы здесь сосредоточимся на русификации именно системного шрифта, хотя читатель может по этому образцу самостоятельно русифицировать и любой другой шрифт (особенно, если у него экран побольше).

А в чем проблема?

Для начала давайте вникнем в корни проблемы. Среда Arduino IDE - это обычный текстовый редактор Windows, который работает в универсальной кодировке UTF-8 , как любой другой в современных версиях Windows (Блокнот, например). UTF-8 представляет собой экономичную версию многобайтовой кодировки UNICODE. В UTF-8 англоязычные символы, цифры, точки-запятые-скобки и всякие прочие значки представлены одним байтом, совпадающим со стандартной кодировкой ASCII . Поэтому их представление в коде скетча не представляет никаких трудностей: строка англоязычных символов после компиляции передается в загружаемый hex-файл без изменений и оказывается понятна 8-разрядному контролеру, как говорится, «без перевода».

В процессе этого преобразования каждый символ, как и в любой программе на любом языке программирования, представляется непосредственно в виде его кода, то есть порядкового номера в таблице шрифта, из которой программа извлекает графическое начертание соответствующего символа. В файле шрифта System5x7.h библиотеки openGLCD количество символов представлено переменной font_Char_Count типа uint8_t , то есть не может превышать величины одного байта. Поэтому кириллические символы, которые в UTF-8 занимают два байта , не могут быть переданы контроллеру обычным образом.

Предыдущие попытки решения

Заметим, что это было не всегда так. Версии Arduino 1.0.x (и, по слухам, 1.6.0) усекали двухбайтовый код до однобайтового, банально отбрасывая старший байт (который для кириллицы, как следует из таблицы UTF-8 по ссылке выше, равен либо 0xD0, либо 0xD1). Потому для доработки шрифта в этих версиях среды годится старая библиотека GLCD v3 , в которой массив шрифта просто дополнялся символами кириллических букв так, чтобы их позиции совпадали с младшим байтом кодировки UTF-8 (байты с 0x80 по 0xBF). Более подробно такая модернизация описана в статье автора «Работа с текстом на графическом дисплее» . Повторяю - для нее нужна одна из версий Arduino IDE 1.0.x в совокупности с библиотекой GLCD v3, а не их более современные варианты.

В новых версиях Arduino IDE стало все сложнее. Библиотека решительно отказывается понимать двухбайтовые номера символов, выводя вместо них пустое место, потому простой переделкой шрифта тут не обойдешься. Приходится дополнить его функцией перекодировки двухбайтовых символов в однобайтовые.

Решение

Автор не стал лезть в недра библиотечных функций, а написал для openGLCD надстройку в виде функции outstr() , которая перебирает все элементы входной строки, пропуская их через оператор выбора Switch . Он вылавливает из строки кириллические символы и заменяет их однобайтовыми кодами, соответствующими модернизированному файлу шрифта System5x7R.h .

Например, для заглавной русской буквы «Ф» строка замены будет такой:

Case "Ф": GLCD.PutChar(0xA4); break;
Здесь 0xA4 - младший байт кодировки буквы «Ф» в UTF-8 (см. ссылку выше). В соответствии с этой кодировкой составлен новый файл шрифта System5x7R.h . В принципе при таком подходе в шрифте можно применять любую кодировку русских символов и любых других глифов, которые вздумается вставить в шрифт. Лишь бы их общее количество не превышало 128 штук: от начала таблицы до символа 0x7F (127 - последний символ стандартной таблицы ASCII) целесообразно оставить шрифт в неприкосновенности.

Правда, пару вольностей с таблицей ASCII я себе разрешил. Дело в том, что в оригинальном шрифте System5x7.h значок градуса вынесен в последнюю строку таблицы, занимая символ 0x80, который у нас уже относится к кириллице. Чтобы не нарушать порядок построения кириллической таблицы в соответствии с UTF-8, эта строка выброшена из файла. А значок градуса пристроен вместо символа ASCII «~» (номер 0x7E), который в шрифте все равно не использовался по назначению. Зато такая замена позволяет вводить значок градуса в тексте скетча прямо с клавиатуры в виде символа «~».

Еще одна вольность связана с тем, что автор на дух не переносит перечеркнутый ноль - архаику времен АЦПУ и монохромных текстовых дисплеев. Потому ноль в модернизированном шрифте заменен на глиф буквы «О». Те, кто придерживается пуристических принципов, могут просто удалить в файле шрифта System5x7R.h эту вставку (старый глиф перечеркнутого нуля там оставлен закомментированным, его код 0x30).

В модернизированной библиотеке openGLCD , которую вы можете скачать по ссылке в конце статьи, внесено еще одно исправление - изменен порядок подключения выводов для дисплеев с контроллером ks0108. Почему автором библиотеки выбран такой порядок (см. таблицу по ссылке на официальном сайте Arduino), неизвестно. В модернизированном варианте подключение дисплея (для примера выбран популярный MT-12864J) осуществляется согласно вот такой схеме:

Схема подключения MT-12864J

Переменный резистор R1 здесь подключается согласно рекомендации производителя , а резистор R2 служит для ограничения тока подсветки, если она подключена не к напряжению 5 В, а прямо ко входному источнику питания (вывод Vin Arduino) с более высоким напряжением.

Пример вывода на дисплей MT-12864J русского алфавита вперемешку с латинским, а также цифр и значка градуса, представлен на фото:

Текст скетча для этого примера:

Текст скетча с выводом русского алфавита

#include //подключим библиотеку #include //файл с функцией вывода русских букв #include //файл с кодами русских букв void setup() { GLCD.Init(); //инициализация GLCD.ClearScreen(); } void loop() { GLCD.SelectFont(System5x7R); //выбираем шрифт GLCD.CursorTo(0,0); //установим курсор в начальную позицию //выводим смешанные англо-русские строки: outstr("ABC АВГДЕЖЗИКЛМНОП\n"); outstr("PRQ РСТУФХЦЧШЩЪЫЬЭЮЯ\n"); outstr("nts абвгдежзийклмноп\n"); outstr("xyz рстуфхцчшщъыьэюя\n"); GLCD.println("1234567890"); GLCD.CursorTo(19,4); //установим курсор в предпоследнюю позицию 5-й строки GLCD.print("~C"); //градус С GLCD.println("@;/.,|<>()=-_{}\"""); GLCD.CursorTo(4,7); //установим курсор в поз 4 строки 8 GLCD.print("MT-12864J"); }

Так как файлы с функцией outstr.h и шрифтом System5x7R.h размещены в корневом каталоге модернизированной библиотеки, то на них надо размещать отдельные ссылки в начале скетча с помощью директивы #include . Для англоязычных надписей удобно по-прежнему пользоваться стандартными функциями println/print , а вот при необходимости перевода строки в русском тексте необходимо явно указывать символ «\n».

Подправленный вариант библиотеки вы можете скачать

Наконец доехали из поднебесной матричные модули. Каждый модуль состоит из микросхемы MAX7219 (), светодиодной матрицы, в обвязке стоят один конденсатор и один резистор.

Управляется MAX7219 по интерфейсу SPI.

Микросхемы в кластере соединены последовательно. Читал в интернете, что максимально возможное последовательное подключение допускает всего 8 штук MAX7219. Не верьте. 16 модулей соединил, и все прекрасно работает.

Модули, представленные на Али, бывают в нескольких вариантах исполнения. Наибольшей популярностью пользуются 2 вида: с микросхемой в DIP и в SOIC корпусах. Модуль с DIP-микросхемой большего размера и не так удобен при соединении в кластер. Соединять придется кучей проводов.

Модули с микросхемой в SOIC-корпусе имеют размер светодиодной матрицы и соединяются пайкой или джамперами. Получается красиво и аккуратно.

Наиболее известными библиотеками для работы с матрицами и кластерами являются MAX72xx Panel от Марка Райса и Parola от MajicDesigns : первая библиотека проще в использовании, вторая посложнее с бОльшими возможностями. Распишу подробнее.

MAX72xx Panel

При использовании MAX72xx Panel обязательна установка библиотеки Adafruit GFX .

Для русификации текста необходимо будет скачать ЭТОТ ФАЙЛ и заменить стандартный файл glcdfont.c в каталоге Arduino/Libraries/Adafruit-GFX-Library-master. Также в этом файле описаны, кроме нужных букв и цифр, куча всяких символов. Далеко не все они могут пригодиться. Картинка ниже поясняет как формируются символы.

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

Итак, библиотеки MAX72xx Panel и Adafruit GFX установлены, файл glcdfont.c заменен. Запускаем Arduino IDE, открываем ФАЙЛ . В скетче есть функция utf8rus. Она обеспечивает перекодировку таблицы символов для русского языка. Она нужна только для нормального вывода из программы, то есть в программе нужный текст пишется на русском. Если текст вводится через СОМ-порт, то коррекция кодов символа происходит в функции Serial_Read. В IDE и в консоли разработчики использовали разные кодировки.

В начале файла присутствуют строки необходимые для работы библиотеки.

int numberOfHorizontalDisplays = 1;

int numberOfVerticalDisplays = 16;

У меня модули с микросхемой в SOIC-корпусе. У них есть небольшая особенность. Матрица у модулей установлена повернутой на 90 градусов. Это плата за удобство соединения. Если запустить скетчи, идущие в комплекте с библиотеками, они будут выводить текст снизу вверх в каждом модуле. Текст будет выводится зигзагами. Для лечения этого недуга библиотеке надо "сказать", что вертикальных дисплеев 16 (физически они расположены горизонтально). И потом в void Setup указать библиотеке строку

matrix.setRotation(matrix.getRotation() + 1);

Она программно перевернет каждую матрицу. И отображаться все будет нормально.

У модулей с DIP-корпусом микросхем такого нет. Там все красиво, кроме кучи проводов.

Библиотека MAX72xx Panel довольно скромная. Визуальных эффектов вывода нет. Кластер воспринимается как одно целое. Намного лучше дела обстоят с MD Parola.

Parola от MajicDesigns.

Обладатели модулей с микросхемой в SOIC-корпусе также столкнутся с проблемой ориентации модулей в кластере. Только выглядит это немного по-другому нежели в MAX72xx. Здесь модули окажутся как бы не в своей очереди.

Скетч HelloWorld из образцов в комплекте с библиотекой.

Программно в скетче мне не удалось вылечить этот недуг. Я вылечил его по-другому. В файле Adruino/libraries/MD_MAX72xx_lib.h в конце нужно найти строки как на картинке.

И исправить в выделенной строке выделенную 1 на 0. Сохранить файл. Arduino IDE можно не перезагружать. Заливаем, смотрим.

Теперь можно использовать 24 эффекта анимации. Анимация запускается командой P.displayText(«Текст для вывода», «выравнивание текста», скорость, задержка показа, эффект появления, эффект исчезновения). Как видите, настроек достаточно много.

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

Как вы уже догадываетесь проблема с кириллическими буквами. Она тоже решаема. Рядом с предыдущим файлом в той же директории лежит файлик MD_MAX72xx_font.cpp. Это файл шрифта. Символы в нем сформированы аналогично файлу шрифта GFX библиотеки. Есть небольшое отличие. Здесь размер символа может быть меньше 5 точек. В библиотеке Adafruit GFX восклицательный знак, например, занимает также 5 точек шириной, как и любой другой символ, только используется один ряд точек. Остальные не светятся, но используются под символ. В Parola тот же восклицательный знак занимает также один ряд точек, только рядом не пустые точки, а могут стоять соседние символы. Понятнее будет разобраться по картинке.

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

Итог. Библиотека MAX72xx Panel от Марка Райса проста в использовании и понимании, но с бедным функционалом.

Библиотека Parola от MajicDesigns посложнее и ее возможностей хватит практически для любого применения.

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

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

1. Модуль светодиодной матрицы с микросхемой MAX7219

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

А вот так модуль выглядит уже с матрицей.

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

Входной разъем:

• VCC, GND — питание;
• DIN — вход данных;
• CLK — синхроимпульс.

Выходной разъем:

• VCC, GND — питание;
• DOUT — выход данных;
• CS — выбор модуля (chip select);
• CLK — синхроимпульс.

Работает модуль от напряжения 5 Вольт.

Подключение

Подключаем матричный модуль к контроллеру Ардуино Уно по следующей схеме:

Светодиодная матрицы 8×8 с MAX7219	VCC	GND	CIN	CS	CLK
Ардуино Уно	+5V	GND	11	9	13

Принципиальная схема

Внешний вид макета

2. Вывод пикселей с помощью библиотеки Max72xxPanel

Для управления микросхемой MAX7219 воспользуемся библиотекой Max72xxPanel . Скачать её можно по ссылкам в конце урока.

Установим библиотеку и напишем небольшую программу, которая будет выводить на дисплей всего одну точку с координатами x=3 и y=4. Точка будет мигать с периодом 600 миллисекунд.

#include #include #include int pinCS = 9; int numberOfHorizontalDisplays = 1; // количество матриц по-горизонтали int numberOfVerticalDisplays = 1; // количество матриц по-вертикали Max72xxPanel matrix = Max72xxPanel(pinCS, numberOfHorizontalDisplays, numberOfVerticalDisplays); void setup() { matrix.setIntensity(4); // яркость от 0 до 15 } void loop() { matrix.drawPixel(3, 4, HIGH); // зажигаем пиксель с координатами {3,4} matrix.write(); // вывод всех пикселей на матрицу delay(300); matrix.drawPixel(3, 4, LOW); // гасим пиксель matrix.write(); delay(300); }

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

Важно отметить, что после включения и выключения пикселей с помощью функции drawPixel , необходимо вызвать функцию write . Без функции write, пиксели не высветятся на матрице!

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

#include #include #include int pinCS = 9; int numberOfHorizontalDisplays = 1; // количество матриц по-горизонтали int numberOfVerticalDisplays = 1; // количество матриц по-вертикали Max72xxPanel matrix = Max72xxPanel(pinCS, numberOfHorizontalDisplays, numberOfVerticalDisplays); const byte data = { 0b00111100, 0b01000010, 0b10100101, 0b10000001, 0b10100101, 0b10011001, 0b01000010, 0b00111100 }; void setup() { matrix.setIntensity(7); // яркость от 0 до 15 matrix.fillScreen(LOW); // очистка матрицы for (int y = 0; y < 8; y++) { for (int x = 0; x < 8; x++) { // зажигаем x-й пиксель в y-й строке matrix.drawPixel(x, y, data[y] & (1<

Примечание. В библиотеке Max72xxPanel есть функция setRotation, которая задает ориентацию изображения на матрице. Например, если мы захотим повернуть смайл на 90 градусов, нужно будет сразу после вызова функции setIntensity вызвать setRotation с соответствующими аргументами:

matrix.setRotation(0, 1);

первый параметр — это индекс матрицы, в нашем случае он равен нулю; второй параметр — количество поворотов на 90 градусов.

3. Вывод текста с помощью библиотеки Adafruit-GFX-Library

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

В популярной библиотеке Adafruit-GFX-Library помимо функций для работы с графикой и текстом, имеется и база латинских букв в верхнем и нижнем регистрах, а также все знаки препинания и прочие служебные символы. Ссылка на библиотеку есть в конце урока.

Отобразить символ на матрице можно с помощью функции drawChar .

drawChar(x, y, символ, цвет, фон, размер);

Первые два параметра функции отвечают за координаты верхнего левого угла символа. Третий параметр — это сам символ. Цвет символа в нашем случае будет равен 1 или HIGH, так как матрица двухцветная. Фон равен 0 или LOW. Последний параметр «размер» сделаем равным 1.

Напишем программу, которая будет по-очереди выводить на матрицу все буквы фразы: «HELLO WORLD!».

#include #include #include int pinCS = 9; int numberOfHorizontalDisplays = 1; int numberOfVerticalDisplays = 1; Max72xxPanel matrix = Max72xxPanel(pinCS, numberOfHorizontalDisplays, numberOfVerticalDisplays); String tape = "HELLO WORLD!"; int wait = 20; void setup() { matrix.setIntensity(7); // яркость от 0 до 15 } void loop() { for (int i = 0 ; i < tape.length(); i++) { matrix.fillScreen(LOW); matrix.drawChar(0, 0, tape[i], HIGH, LOW, 1); matrix.write(); } delay(wait); }

Примечание. В библиотеке Adafruit_GFX имеется множество функций для работы с графикой. Например, drawCircle(3, 3, 2, HIGH) начертит окружность с центром {3,3} и радиусом 2. Последний параметр — цвет, но в случае монохромной матрицы он равен 1 или HIGH. Функция drawLine(0, 0, 3, 6, HIGH) начертит отрезок между точками {0,0} и {3,6}.

3. Программа. Бегущая строка на max7219

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

Принципиальная схема

Внешний вид макета

Программа

Бегущую строку будем делать путем сдвига координат букв. Для вывода буквы в нужных координатах используем всё ту же функцию drawChar.

#include #include #include int pinCS = 9; int numberOfHorizontalDisplays = 6; // теперь у нас по-горизонтали 6 матриц int numberOfVerticalDisplays = 1; // а по-вертикали, по-прежнему, одна Max72xxPanel matrix = Max72xxPanel(pinCS, numberOfHorizontalDisplays, numberOfVerticalDisplays); String tape = "сайт"; // текст, который будет плыть int wait = 20; // время между крайними перемещениями букв int spacer = 1; // расстояние между буквами int width = 5 + spacer; // размер шрифта void setup() { matrix.setIntensity(7); // яркость } void loop() { for (int i = 0 ; i < width * tape.length() + matrix.width() - 1 - spacer; i++) { matrix.fillScreen(LOW); int letter = i / width; int x = (matrix.width() - 1) - i % width; int y = (matrix.height() - 8) / 2; // center the text vertically while (x + width - spacer >= 0 && letter >= 0) { if (letter < tape.length()) { matrix.drawChar(x, y, tape, HIGH, LOW, 1); } letter--; x -= width; } matrix.write(); delay(wait); } }

Загружаем программу на Ардуино Уно и наблюдаем бегущую строку!

Задания

1. Электронные часы. Собрать схему из четырех светодиодных матриц и модуля часов реального времени. Написать программу для Ардуино, которая будет выводить часы и минуты на дисплей из матриц.
2. Игра змейка. Собрать из четырех светодиодных матриц дисплей разрешением 16×16 пикселей. Реализовать на Ардуино такую известную игру, как «змейка» (или «питон»). В схему необходимо добавить четыре кнопки для управления направлением движения, а также зуммер для сигнализации события съедания яблок.

Заключение

Соединяя вместе матричные модули на max7219 можно собирать достаточно большие дисплеи и использовать их в Ардуино-проектах, где требуется вывод ярких изображений. Светодиодные дисплеи, в отличие от жидкокристаллических, устойчивы к низким температурам. Например, бегущую строку из матриц можно размещать на улице даже в 30-градусный мороз.

Кроме одноцветных матричных модулей на max7219 существуют и другие подобные устройства. Например, трехцветные светодиодные дисплеи с разрешением 32×16 и даже 64×32 пикселей. О таких модулях поговорим в следующих уроках и статьях.

Полезные ссылки

1. Библиотека Max72xxPanel :

2. Библиотека Adafruit-GFX-Library .

Здравствуйте, уважаемые пользователи LPgenerator!

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

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

2. Обязательно укажите алфавит, то есть набор символов.

Если лендинг русскоязычный, то выберите латинский (Latin ) и кириллический (Cyrillic ):

3. Выберите понравившийся шрифт (или шрифты) и нажмите "+":

4. Перейдите в коллекцию добавленных шрифтов. Для этого кликните по черной панели внизу:

5. В открывшемся окне в первом пункте отображаются выбранные ранее шрифты.

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

6. Если набор и внешний вид добавленных шрифтов устраивает, перейдите в раздел "EMBED" и полностью скопируйте содержимое поля "STANDART":

Не закрывайте вкладку Google Fonts, она нам еще понадобится.

Откройте необходимую целевую страницу в редакторе LPgenerator и нажмите инструмент «Скрипты» :

• в открывшемся окне нажмите «Добавить новый скрипт» ;
• пропишите название скрипта;
• выберете положение скрипта «Внутри тега HEAD» ;
• вставьте скопированный код;
• не забудьте сохранить изменения.

7. Вернитесь во вкладку Google Fonts.

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

Для каждого шрифта используется свой CSS .

Например, для шрифта Lobster код выглядит так: font-family: "Lobster", cursive;

8. Вернитесь в редактор LPgenerator и кликните по элементу (текст или кнопка), к которому нужно применить загруженный шрифт.

Есть особенности применения стилей для разных элементов лендинга.

CTA-элементы

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

Текстовые блоки целевой страницы

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

Внимание: при этом будут сброшены все изменения, внесенные в размер, стиль шрифта, выравнивание и т. д.

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

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

9. Сохраняем изменения и любуемся результатом.

Обратите внимание: в редакторе LPgenerator шрифт останется прежним, дополнительные шрифты отображаются только в предпросмотре и при посещении опубликованного лендинга.