Font size js: HTML DOM Style fontSize Property

Ты хоть рисуешь? — Увеличение размера шрифта в Draft.js | Автор Lige Williamson

Недавно я опубликовал статью под названием This Nest Is A Bity Drafty, в которой рассматривается отображение упорядоченных и неупорядоченных списков, а также отображение вложенных списков в текстовом редакторе Draft.js. В этой статье я собираюсь продолжить обсуждение функций Draft.js, реализовать которые мне было особенно сложно, показав, как создать раскрывающееся меню, позволяющее пользователям изменять размер шрифта в текстовом редакторе.

Для начала мы создадим компонент TextEditor , который будет отображать компонент Draft.js Editor способом, описанным в документации Draft.js. Мы также рендерим пользовательский компонент EditorToolbar в компоненте TextEditor и передаем ему editorState и setEditorState в качестве реквизита:

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

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

Наше выпадающее меню будет состоять из кнопки и меню div , содержащего все указанные нами размеры шрифта. Меню будет условно отображаться в зависимости от того, была ли нажата кнопка. Для этого мы добавим isShowingFontSizeMenu в состояние компонента и установим его значение false . Затем мы добавим событие onMousedown к кнопке , которая вызовет preventDefault , а затем установим значение 9. 0005 isShowingFontSizeMenu на обратное его текущему значению.

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

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

Когда все это будет сделано, EditorToolbar будет выглядеть так:

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

При реализации этой функции я обнаружил, что для обеспечения согласованности и предотвращения ошибок лучше всего использовать модуль узла draft-js-custom-styles . Давайте запустим npm i draft-js-custom-styles в терминале и импортируем модуль в TextEditor .

Использование draft-js-custom-styles несколько нетрадиционно. После того, как мы импортируем модуль, нам нужно объявить функции, которые мы будем использовать из модуля, и передать массив свойств CSS в модуль в качестве аргументов. Для нашего приложения мы будем использовать стили и customStyleFn функции, и поскольку мы изменяем только размер шрифта, мы будем передавать массив, который содержит только свойство 'font-size' . Далее нам нужно передать customStyleFn в Editor и стилей в EditorToolbar в качестве реквизита. Как только это будет сделано, TextEditor будет выглядеть так:

Теперь давайте создадим функцию с именем setFontSize в EditorToolbar . Это будет вызываться всякий раз, когда в раскрывающемся списке размер шрифта выбирается параметр размера шрифта.

При вызове setFontSize сделает несколько вещей:

Сначала будет preventDefault для сохранения фокуса в редакторе .

Затем он объявит состояние редактора со всеми свойствами размера шрифта, удаленными из текущего выбора. Это сделано потому, что вместо того, чтобы переопределять текущее свойство размера шрифта, мы хотим заменить его новым размером шрифта, чтобы гарантировать, что никогда не будет объявлено несколько размеров шрифта в одном месте в пределах 9.0005 Редактор .

Затем он обновит editorState , чтобы использовать выбранный размер шрифта.

Наконец, для параметра isShowingFontSizeMenu будет установлено значение false, что закроет раскрывающееся меню.

После этого EditorToolbar будет выглядеть так:

Таким образом, мы успешно реализовали функцию размера шрифта в нашем текстовом редакторе Draft.js!

Вот ссылка на репозиторий этого туториала для тех, кому интересно.

Как создать меню выбора размера шрифта в Draft.js

github.com

Использование Typography.js | Gatsby

В этом руководстве рассказывается, как использовать Typography. js в проекте Gatsby.

Typography.js

Typography.js — это библиотека JavaScript, которая позволяет вам исследовать типографский дизайн вашего веб-сайта и определять красивые пользовательские и уже существующие типографские темы. Это позволяет вам легко изменить шрифт на вашем сайте. В настоящее время Typography.js поддерживает более 30 тем, которые вы можете использовать. Вы также можете создавать свои собственные пользовательские темы шрифтов, если ни одна из доступных тем не соответствует вашим требованиям. Чтобы использовать Typography.js в своем проекте, вам необходимо установить подключаемый модуль Gatsby и указать объект конфигурации для Typography.js.

Установка плагина Typography.js

У Гэтсби есть плагин gatsby-plugin-typography для интеграции Typography.js в ваш проект.

Вы можете установить плагин и его одноранговые зависимости в свой проект, выполнив следующую команду:

После завершения установки плагина перейдите к файлу gatsby-config. js , расположенному в корне каталога вашего проекта. и добавить плагин в конфигурацию:

gatsby-plugin-typography требует указать два параметра:

• pathToConfigModule (строка): путь к файлу, в который вы экспортируете конфигурацию Typography.js.
• опустить GoogleFont (логическое значение, по умолчанию: false ): По умолчанию Typography.js включает помощника, который отправляет запрос в CDN Google Font для необходимых вам шрифтов. Возможно, вы захотите использовать свои собственные шрифты, внедрив их или используя CDN по вашему выбору. По настройке omitGoogleFont: true , gatsby-plugin-typography пропустит добавление вспомогательного шрифта. Вместо этого вам нужно будет самостоятельно включить соответствующие шрифты — см. Добавление локального шрифта

Создание конфигурации типографики

Теперь, когда вы добавили плагин, создайте каталог src/utils/ , если он еще не существует в ваш проект и добавьте новый файл с именем typography. js . Вы будете использовать этот файл для указания конфигурации Typography.js и установите этот файл в качестве пути для параметр pathToConfigModule .

Внутри созданного вами файла typography.js вы определяете конфигурацию типографики вашего веб-сайта. Базовая конфигурация typography.js выглядит следующим образом:

Если вы устанавливаете Typography.js в существующий проект Gatsby, который вы начали, вам нужно будет удалить все конфликтующие стили шрифтов CSS из вашей кодовой базы в пользу вашего нового Настройки Typography.js.

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

Чтобы найти или создать новую тему типографики, вы можете посетить Typography.js, чтобы просмотреть список параметров.

Установка тем Typography.