Как изменить размер текста – JavaScript

String.prototype.fontsize()

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

Сводка

Примечание: элемент был удалён из HTML5 (en-US) и больше не должен использоваться. Вместо него веб-разработчикам следует использовать свойства CSS.

Синтаксис

Параметры

Целое число от 1 до 7, либо строка с целым числом со знаком по модулю от 1 до 7.

Описание

При задании размера в виде целого числа, вы устанавливаете размер шрифта строки str в один из 7 предопределённых размеров. При задании размера в виде строки, например, «-2», вы задаёте размер шрифта строки str относительно размера, установленного тегом .

Примеры

Пример: использование метода fontsize()

В следующем примере демонстрируется использование нескольких строковых методов для изменения размера строки:

var worldString = 'Привет, мир'; console.log(worldString.small()); // Привет, мир console.log(worldString.big()); // Привет, мир console.log(worldString.fontsize(7)); // Привет, мир 

При помощи объекта element.style (en-US) вы можете получить значение атрибута style элемента и управлять им более обобщённым способом, например:

.getElementById('yourElemId').style.fontSize = '0.7em'; 

Спецификации

Спецификация	Статус	Комментарии
ECMAScript 2015 (6th Edition, ECMA-262) Определение ‘String.prototype.fontsize’ в этой спецификации.	Стандарт	Изначальное определение. Реализована в JavaScript 1.0. Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Свойства font-size и line-height

Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.

font-size и line-height

• font-size – размер шрифта, в частности, определяющий высоту букв.
• line-height – высота строки.

Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:

Размер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.

Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p , g . Как видно из примера выше, при размере строки, равном font-size , строка не будет размером точно «под букву».

В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы Ё и р в примере выше пересекаются как раз поэтому.

В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.

Обычно размер строки делают чуть больше, чем шрифт.

По умолчанию в браузерах используется специальное значение line-height:normal .

Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне 1.1 — 1.25 , но стандарт не гарантирует этого, он говорит лишь, что оно должно быть «разумным» (дословно – англ. reasonable).

Множитель для line-height

Значение line-height можно указать при помощи px или em , но гораздо лучше – задать его числом.

Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем line-height: 2 при font-size: 16px будет аналогично line-height: 32px (=16px*2) .

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

• Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта. То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
• Значение, заданное в единицах измерения, запоминается и наследуется «как есть». Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.

Давайте посмотрим, как это выглядит, на примерах:

 
стандартная строка 
шрифт в 2 раза больше 
шрифт в 2 раза больше
 

Источник

Style fontSize Property

The fontSize property sets or returns the font size of the text.

Browser Support

Syntax

Return the fontSize property:

Set the fontSize property:

Property Values

Value	Description
xx-small x-small small medium large x-large xx-large	Sets the size of the font to different fixed sizes, from xx-small to xx-large
smaller	Decreases the font-size by one relative unit
larger	Increases the font-size by one relative unit
length	Defines the font-size in length units
%	Sets the font-size to a % of the parent element’s font size
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	medium
Return Value:	A String, representing the font size of the text in the element
CSS Version	CSS1

More Examples

Example

A demonstration of possible values:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById(«demo»).style.fontSize = listValue;

Example

Return the font size of an element:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Как изменить размер текста – JavaScript

Всем привет!
В этой статье я расскажу, как изменить размер текста на сайте.
Как это будет выглядеть? После установки кода на сайте появятся две кнопки, например, «Уменьшить» и «Увеличить». После нажатия на эти кнопки, текст уменьшится либо увеличится.
Полезная вещь на сайте для тех, у кого плохое зрение. Хотя, можно обойтись и без этого скрипта, так как сами браузеры способны маштабировать страницы. Но, считаю своим долгом выложить на блоге скрипт, а вдруг кому-то пригодится.

1. Первый скрипт самый простой.
Он может увеличить текст на 60 px и уменьшить на 8 px.
Естественно, эти параметры можете менять на свое усмотрение, строка №13 – на уменьшение, строка №17 – на увеличение:

.text < font-size:14px; >.text1 < font-size:8px; >.text2

2. Второй скрипт немного длине, но уменьшает и увеличивает текст до бесконечности, то есть, с каждым разом размеры меняются на 1 px.
Здесь менять ничего не надо, кроме самого текста, который нужно увеличить или уменьшить ( строка № 7 ), ну и название кнопок ( строка №8, №9,10 ):

     
BlogGood.RU
     

3. Вот еще один код, с помощью которого вы сможете уменьшать и увеличивать текст на сайте. Уменьшение или увеличение текста осуществляется простым кликом по кнопке на 5 px.

    function Font(element,step) Увеличить размер шрифта | Уменьшить размер шрифта 
BlogGood.ru
   

Каким кодом будете пользоваться вы – решать вам, и вообще, нужно ли это для вашего сайта?

Источник

How to Change Font Size of HTML Element in JavaScript?

To change the font size of a HTML Element using JavaScript, get reference to this HTML Element element, and assign required font size value to the element.style.fontSize property.

In the following example, we will change the font size of HTML Element with id «myElement» to «25px» , in JavaScript, using element.style.fontSize property.

example.html

Conclusion

In this JavaScript Tutorial, we learned how to change the font size of a HTML Element using JavaScript.

Related Tutorials

• How to Change Border Color of HTML Element in JavaScript?
• How to Change Border Radius of HTML Element in JavaScript?
• How to Change Border Style of HTML Element in JavaScript?
• How to Change Border Width of HTML Element in JavaScript?
• How to Change Bottom Border of HTML Element in JavaScript?
• How to Change Font Color of HTML Element in JavaScript?
• How to Change Font Family of HTML Element in JavaScript?
• How to Change Font Weight of HTML Element in JavaScript?
• How to Change Height of HTML Element in JavaScript?
• How to Change Left Border of HTML Element in JavaScript?
• How to Change Margin of HTML Element in JavaScript?
• How to Change Opacity of HTML Element in JavaScript?
• How to Change Padding of HTML Element in JavaScript?
• How to Change Right Border of HTML Element in JavaScript?
• How to Change Text in HTML Element to Bold in JavaScript?
• How to Change Text in HTML Element to Italic in JavaScript?
• How to Change Top Border of HTML Element in JavaScript?
• How to Change Width of HTML Element in JavaScript?
• How to Change the Background Color of HTML Element in JavaScript?
• How to Change the Border of HTML Element in JavaScript?
• How to Clear Inline Style of HTML Element in JavaScript?
• How to Get Children of an HTML Element in JavaScript?
• How to Get Class Names of an HTML Element as List in JavaScript?
• How to Get Class Names of an HTML Element as String in JavaScript?
• How to Get First Child of an HTML Element in JavaScript?
• How to Get Height of an HTML Element in JavaScript?
• How to Get Last Child of an HTML Element in JavaScript?
• How to Get Next Sibling of an HTML Element in JavaScript?
• How to Get Previous Sibling of an HTML Element in JavaScript?
• How to Get Width of an HTML Element in JavaScript?
• How to Hide HTML Element in JavaScript?
• How to Insert Element in Document after Specific HTML Element using JavaScript?
• How to Iterate over Children of HTML Element in JavaScript?
• How to Tag Name of an HTML Element in JavaScript?
• How to Underline Text in HTML Element in JavaScript?
• How to get Attributes of HTML Element Element in JavaScript?
• How to get Number of Child Elements of this HTML Element in JavaScript?
• JavaScript – Change Style of HTML Element

Источник