Пример

font-size-adjust

The font-size-adjust CSS property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters).

The property is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters. Legibility can become an issue when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).

To use this property in a way that is compatible with browsers that do not support font-size-adjust , it is specified as a number that the font-size property is multiplied by. This means the value specified for the property should generally be the aspect ratio of the first choice font. For example, consider this style sheet:

font-size: 14px; font-size-adjust: 0.5; 

It is really specifying that the lowercase letters of the font should be 7px high (0.5 × 14px). This will still produce reasonable results in browsers that do not support font-size-adjust , where a 14px font will be used.

Syntax

/* Use the specified font size */ font-size-adjust: none; /* Use a font size that makes lowercase letters half the specified font size */ font-size-adjust: 0.5; /* Two values - added in the Level 5 spec */ font-size-adjust: ex-height 0.5; /* Global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: revert; font-size-adjust: revert-layer; font-size-adjust: unset; 

Values

Choose the size of the font based only on the font-size property.

ex-height | cap-height | ch-width | ic-width | ic-height

Specifies the font metric to normalize on. Defaults to ex-height . One of:

Normalize the aspect value of the fonts, using the x-height divided by the font size.

Normalize the cap-height of the fonts, using the cap-height by the font size.

Normalize the horizontal narrow pitch of the fonts, using the advance width of «0» (ZERO, U+0030) divided by the font size.

Normalize the horizontal wide pitch of the font, using the advance width of «水» (CJK water ideograph, U+6C34) divided by the font size.

Normalize the vertical wide pitch of the font, using the advance height of «水» (CJK water ideograph, U+6C34) divided by the font size.

Choose the size of the font so that its lowercase letters (as determined by the x-height of the font) are the specified number times the font-size .

The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice font-family . This means that the first-choice font, when available, will appear the same size in browsers, whether or not they support font-size-adjust .

0 yields text of zero height (hidden text).

Formal definition

Источник

font-size-adjust

CSS свойство font-size-adjust позволяет лучше контролировать размер шрифта, когда первый выбранный шрифт не доступен.

Когда первый заданный шрифт не доступен, браузер использует второй указанный шрифт. Это может привести к большой разнице в размера шрифта. Чтобы этого не случилось, используйте свойство font-size-adjust.

Все шрифты имеют «значение аспекта», которое равно разнице между строчной буквой «x» и прописной буквой «X». Когда браузер знает «значение аспекта» для первого выбранного шрифта, он может вычислить, какой размер шрифта использовать для второго выбранного шрифта при отображении текста.

Значение по умолчанию:	none
Применяется:	ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:	да
Наследуется:	да
Версия:	CSS3
Синтаксис JavaScript:	object.style.fontSizeAdjust=»0.58″

Синтаксис

font-size-adjust: число|none|inherit;

Значения свойства

Значение	Описание
число	Определяет значение аспекта для использования.
none	Нет регулировки размера шрифта.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

     .divVerdana < font-family: verdana; >.divTimes < font-family: 'times new roman'; >#div1 < font-size-adjust: 0.58; >#div2  
Пример свойства font-size-adjust
 
Пример свойства font-size-adjust
 
 
 
Пример свойства font-size-adjust
 
Пример свойства font-size-adjust
   

Результат данного примера в окне браузера:

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник

font-size-adjust¶

Свойство font-size-adjust указывает, что размер шрифта должен быть выбран на основе высоты строчных букв, а не высоты заглавных букв.

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

Разборчивость может стать проблемой, когда первое семейство шрифтов в свойстве font-family недоступно, а его замена имеет значительно отличающееся соотношение сторон (отношение размера строчных букв к размеру шрифта).

• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• line-height

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* Use the specified font size */ font-size-adjust: none; /* Use a font size that makes lowercase letters half the specified font size */ font-size-adjust: 0.5; /* Two values - added in the Level 5 spec */ font-size-adjust: ex-height 0.5; /* Global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: revert; font-size-adjust: revert-layer; font-size-adjust: unset; 

Значения¶

Значение по-умолчанию: none

none размер шрифта, основанный только на свойстве font-size . задает отношение размера строчных букв к размеру шрифта.

Применяется к: ко всем элементам, включая ::first-letter и ::first-line .

Поддержка браузерами¶

Can I Use font-size-adjust? Data on support for the font-size-adjust feature across the major browsers from caniuse.com.

Пример¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

p>CSS Examples: font-size-adjustp> br /> div class="times"> This is the Times font (10px) which is hard to read in small sizes div> p>p> div class="verdana"> This is the Verdana font (10px) which does much better, since it is a sans - serif font. div> br /> p>Now we 'll do an adjustment:p> p>p> div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh? div> 

 1 2 3 4 5 6 7 8 9 10 11 12 13

.times  font-family: Times, serif; font-size: 10px; > .verdana  font-family: Verdana, sans-serif; font-size: 10px; > .adjtimes  font-family: Times, sans-serif; font-size-adjust: 0.58; font-size: 10px; > 

Источник

font-size

The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative units, such as em , ex , and so forth.

Try it

Syntax

/* values */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large; /* values */ font-size: smaller; font-size: larger; /* values */ font-size: 12px; font-size: 0.8em; /* values */ font-size: 80%; /* math value */ font-size: math; /* Global values */ font-size: inherit; font-size: initial; font-size: revert; font-size: revert-layer; font-size: unset; 

The font-size property is specified in one of the following ways:

• As one of the absolute-size, relative-size or math keywords
• As a or a , relative to the element’s font size.

Values

Absolute-size keywords, based on the user’s default font size (which is medium ).

Relative-size keywords. The font will be larger or smaller relative to the parent element’s font size, roughly by the ratio used to separate the absolute-size keywords above.

For font-relative units that are root-based (such as rem ), the font size is relative to the size of the font used by the (root) element.

Note: To maximize accessibility, it is generally best to use values that are relative to the user’s default font size.

• math Experimental Special mathematical scaling rules must be applied when determining the computed value of the font-size property.

Description

There are several ways to specify the font size, including keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs of the particular web page.

Keywords

Pixels

Setting the font size in pixel values ( px ) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger , the child element displays larger than the parent element on the page.

Note: Defining font sizes in px is not accessible, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.

Ems

Using an em value creates a dynamic or computed font size (historically the em unit was derived from the width of a capital «M» in a given typeface.). The numeric value acts as a multiplier of the font-size property of the element on which it is used. Consider this example:

In this case, the font size of

elements will be double the computed font-size inherited by

elements. By extension, a font-size of 1em equals the computed font-size of the element on which it is used.

If a font-size has not been set on any of the

‘s ancestors, then 1em will equal the default browser font-size , which is usually 16px . So, by default 1em is equivalent to 16px , and 2em is equivalent to 32px . If you were to set a font-size of 20px on the element say, then 1em on the

elements would instead be equivalent to 20px , and 2em would be equivalent to 40px .

In order to calculate the em equivalent for any pixel value required, you can use this formula:

em = desired element pixel value / parent element font-size in pixels

For example, suppose the font-size of the of the page is set to 16px . If the font-size you want is 12px , then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px , then specify 0.625em (10/16 = 0.625); for 22px , specify 1.375em (22/16).

The em is a very useful unit in CSS since it automatically adapts its length relative to the font that the reader chooses to use.

One important fact to keep in mind: em values compound. Take the following HTML and CSS:

html  font-size: 100%; > span  font-size: 1.6em; > 

div> span>Outer span>innerspan> outerspan> div> 

Assuming that the browser’s default font-size is 16px, the words «outer» would be rendered at 25.6px, but the word «inner» would be rendered at 40.96px. This is because the inner ‘s font-size is 1.6em which is relative to its parent’s font-size , which is in turn relative to its parent’s font-size . This is often called compounding.

Rems

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to rem .

html  font-size: 100%; > span  font-size: 1.6rem; > 

Then we apply this CSS to the same HTML, which looks like this:

span>Outer span>innerspan> outerspan> 

In this example, the words «outer inner outer» are all displayed at 25.6px (assuming that the browser’s font-size has been left at the default value of 16px).

Ex

Like the em unit, an element’s font-size set using the ex unit is computed or dynamic. It behaves in exactly the same way, except that when setting the font-size property using ex units, the font-size equals the x-height of the first available font used on the page. The number value multiplies the element’s inherited font-size and the font-size compounds relatively.

See the W3C Editor’s Draft for a more detailed description of font-relative length units such as ex .

Formal definition

Initial value	medium
Applies to	all elements. It also applies to ::first-letter and ::first-line .
Inherited	yes
Percentages	refer to the parent element’s font size
Computed value	as specified, but with relative lengths converted into absolute lengths
Animation type	a length

Formal syntax

Источник