Search completed in 1.03 seconds.
font-variant-east-asian - CSS: Cascading Style Sheets
the
font-variant-east-asian css property controls the use of alternate glyphs for east asian scripts, like japanese and chinese. ...
... the
font-variant-east-asian css property controls the use of alternate glyphs for east asian scripts, like japanese and chinese. ...
... the
font-variant-east-asian css property controls the use of alternate glyphs for east asian scripts, like japanese and chinese. ...
...And 10 more matches
font-variant-ligatures - CSS: Cascading Style Sheets
the
font-variant-ligatures css property controls which ligatures and contextual forms are used in textual content of the elements it applies to. this leads to more harmonized forms in the resulting text. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...res and contextual forms are used in textual content of the elements it applies to. this leads to more harmonized forms in the resulting text. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...d in textual content of the elements it applies to. this leads to more harmonized forms in the resulting text. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 10 more matches
font-variant-numeric - CSS: Cascading Style Sheets
the
font-variant-numeric css property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the
font-variant-numeric css property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the
font-variant-numeric css property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 8 more matches
font-variant-alternates - CSS: Cascading Style Sheets
the
font-variant-alternates css property controls the usage of alternate glyphs. these alternate glyphs may be referenced by alternative names defined in @font-feature-values. ...
... the
font-variant-alternates css property controls the usage of alternate glyphs. these alternate glyphs may be referenced by alternative names defined in @font-feature-values. ...
... the
font-variant-alternates css property controls the usage of alternate glyphs. these alternate glyphs may be referenced by alternative names defined in @font-feature-values. ...
...And 7 more matches
font-variant - CSS: Cascading Style Sheets
the
font-variant css shorthand property allows you to set all the font variants for a font. you can also set the css level 2 (revision 1) values of
font-variant, (that is, normal or small-caps), by using the font shorthand. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...s of
font-variant, (that is, normal or small-caps), by using the font shorthand. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties:
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric syntax
font-variant: small-caps;
font-variant: common-ligatures small-caps; /* global values */
font-variant: inherit;
font-variant: initial;
font-variant: unset; values normal specifies a normal font face; each of the longhand properties has an initial value of normal. longhand prop...
...s
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric syntax
font-variant: small-caps;
font-variant: common-ligatures small-caps; /* global values */
font-variant: inherit;
font-variant: initial;
font-variant: unset; values normal specifies a normal font face; each of the longhand properties has an initial value of normal. longhand properties of
font-variant are:
font-variant-caps,
font-variant-numeric,
font-variant-alternates,
font-variant-ligatures, and
font-variant-east-asian. none sets the value of the
font-variant-ligatures to none and the values of the other longhand property as normal, their initial value. <common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values> specifies the keywords related to the...
...And 7 more matches
font-variant-caps - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. if petite capital glyphs are not available, they are rendered using small capital glyphs. if these are not present, the browser synthesizes them from the uppercase glyphs. fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. ...
...the dot, one without) and two case pairings: i/İ and ı/i. in german (de), the ß may become ẞ (u+1e9e) in uppercase. in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel (άι/ΑΪ). ...
...wo case pairings: i/İ and ı/i. in german (de), the ß may become ẞ (u+1e9e) in uppercase. in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel (άι/ΑΪ). syntax /* keyword values */
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps; /* global values */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset; the
font-variant-caps property is specified using a single keyword value from the list below. in each case, if t...
...And 5 more matches
font-variant - SVG: Scalable Vector Graphics
the
font-variant attribute indicates whether the text is to be rendered using variations of the fontʼs glyphs. note: as a presentation attribute,
font-variant can be used as a css property. see the css
font-variant property for more information. ...
...attribute,
font-variant can be used as a css property. see the css
font-variant property for more information. ...
...ss
font-variant property for more information. ...
...And 2 more matches
font-variant-position - CSS: Cascading Style Sheets
the
font-variant-position css property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript. the glyphs are positioned relative to the baseline of the font, which remains unchanged. these glyphs are typically used in <sub> and <sup> elements. /* keyword values */
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super; /* global values */
font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: unset; when the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs. these alternate glyphs share the same em-box and the same b...
...d, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs. these alternate glyphs share the same em-box and the same baseline as the rest of the font. they are merely graphically enhanced, and have no effect on the line-height and other box characteristics. syntax the
font-variant-position property is specified as one of the keyword values listed below. values normal deactivates alternate superscript and subscript glyphs. sub activates subscript alternate glyphs. if, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs. super activates superscript alternate glyphs. if, in a given run, ...
...s. formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | sub | super examples setting superscript and subscript forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p> css p { display: inline; } .normal {
font-variant-position: normal; } .super {
font-variant-position: super; } .sub {
font-variant-position: sub; } result specifications specification status comment css fonts module level 3the definition of '
font-variant-position' in that specification. candidate recommendation initial definition. browser compatibility the compatibility table on this page is ...
...definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
OpenType font features guide - CSS: Cascading Style Sheets
entype features are like secret compartments in fonts. unlock them and you'll find ways to make fonts look and behave differently in subtle and dramatic ways. not all opentype features are appropriate to use all of the time, but some features are critical for great typography. -- tim brown, head of typography at adobe. sometimes it's substance, not just style there are some cases — like with
font-variant-east-asian — that opentype features are directly tied to using different forms of certain glyphs, which can impact meaning and readability. in cases such as these it's more than just a nicety, but rather an integral part of the content itself. the font features there are a number of different features to consider. they are grouped and explained here according to the main attributes and option...
...bm plex serif, dancing script, and kokoro (all available and free to use, most are on google fonts and other services). kerning (font-kerning) this refers to the spacing between specific glyph pairings. this is generally on by default (as recommended by the opentype specification). it should be noted that if letter-spacing is also set on your text, that is applied after kerning. alternates (
font-variant-alternates) fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. this property can activate an entire set of alternates or just a specific one, depending on the values supplied.the example below is showing several different aspects of working with alternate characters. fonts with...
...per font family. this way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally in this case, @stylistic(alternates) will show all the alternate characters for either font). applying this to just the word 'my' alters the way the 'm' renders, and applying @styleset(alt-a) only changes the lower case 'a'. ...
...And 9 more matches
font - CSS: Cascading Style Sheets
not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). though not directly settable by font, the longhands font-size-adjust and font-kerning are also reset to their initial values. constituent properties this property is a shorthand for the following css properties: font-family font-size font-stretch font-style
font-variant font-weight line-height syntax the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties. if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar. if font is specified as a shorthand for several font-related properties, then: it mus...
...em font, or as a shorthand for various font-related properties. if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar. if font is specified as a shorthand for several font-related properties, then: it must include values for: <font-size> <font-family> it may optionally include values for: <font-style> <
font-variant> <font-weight> <font-stretch> <line-height> font-style,
font-variant and font-weight must precede font-size
font-variant may only specify the values defined in css 2.1, that is normal and small-caps font-stretch may only be a single keyword value. line-height must immediately follow font-size, preceded by "/", like this: "16px/3" font-family must be the last value specified. ...
... <'font-weight'> see the font-weight css property. <'font-stretch'> see the font-stretch css property. <'font-size'> see the font-size css property. <'line-height'> see the line-height css property. <'font-family'> see the font-family css property. ...
...And 7 more matches
CSS Fonts - CSS: Cascading Style Sheets
e style of a font, such as its family, size and weight, line height, and the glyph variants to use when multiple are available for a single character. basic example the following example shows a simple use of basic font properties to style a paragraph of text. ...
... follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more information and usage information. ...
...ariable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more information and usage information. ...
...And 6 more matches
::first-letter (:first-letter) - CSS: Cascading Style Sheets
e ::first-letter notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-letter, introduced in css2. ...
...er notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-letter, introduced in css2. ...
...ons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-letter, introduced in css2. ...
...And 4 more matches
::first-line (:first-line) - CSS: Cascading Style Sheets
first line of a <p> */ p::first-line { color: red; } css3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-line, introduced in css2. ...
... a <p> */ p::first-line { color: red; } css3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-line, introduced in css2. ...
...e { color: red; } css3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-line, introduced in css2. ...
...And 4 more matches
Fundamental text and font styling - Learn web development
helvetica, arial, sans-serif; line-height: 1.6; letter-spacing: 1px; } other properties worth looking at the above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. we just wanted to cover the most important ones here. ...
...there are many more properties you could use. we just wanted to cover the most important ones here. once you've become used to using the above, you should also explore the following: font styles:
font-variant: switch between small caps and normal font alternatives. font-kerning: switch font kerning options on and off. font-feature-settings: switch various opentype font features on and off.
font-variant-alternates: control the use of alternate glyphs for a given font-face.
font-variant-caps: control the use of alternate capital glyphs. ...
...ould also explore the following: font styles:
font-variant: switch between small caps and normal font alternatives. font-kerning: switch font kerning options on and off. font-feature-settings: switch various opentype font features on and off.
font-variant-alternates: control the use of alternate glyphs for a given font-face.
font-variant-caps: control the use of alternate capital glyphs.
font-variant-east-asian: control the usage of alternate glyphs for east asian scripts, like japanese and chinese.
font-variant-ligatures: control which ligatures and contextual forms are used in text.
font-variant-numeric: control the usage of alternate glyphs for numbers, fractions, and ordinal markers. ...
...And 2 more matches
@font-feature-values - CSS: Cascading Style Sheets
the @font-feature-values css at-rule lets you use a common name in the
font-variant-alternates property for features activated differently in opentype. this can help simplify your css when using multiple fonts. the @font-feature-values at-rule may be used either at the top level of your css or inside any css conditional-group at-rule. syntax feature value blocks @swash specifies a feature name that will work with the swash() functional notation of
font-variant-alternates. a swash feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @annotation specifies a feature name that will work with the annotation() functional notation of
font-variant-alternates. an annotation feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't.
...inition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @annotation specifies a feature name that will work with the annotation() functional notation of
font-variant-alternates. an annotation feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @ornaments specifies a feature name that will work with the ornaments() functional notation of
font-variant-alternates. an ornaments feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @stylistic specifies a feature name that will work with the stylistic() functional notation of
font-variant-alternates. a stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @styleset specifies a feature name that will work with t...
...ue definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @stylistic specifies a feature name that will work with the stylistic() functional notation of
font-variant-alternates. a stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @styleset specifies a feature name that will work with the styleset() functional notation of
font-variant-alternates. a stylset feature value definition allows an unlimited number of values: ident1: 2 4 12 1 maps to the opentype values ss02, ss04, ss12, and ss01. note that values higher than 99 are valid, but don't map to any opentype values and are ignored. @character-variant specifies a feature name that will work with the character-variant() functional notation of
font-variant-alternates. a char...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out...
font-feature-settings - CSS: Cascading Style Sheets
these lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or a...
... these lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an opentype font feature. in particular, font-feature-settings should...
... these lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an opentype font feature. in particular, font-feature-settings shouldn't be used to enable sm...
...p"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "smcp", "swsh" 2; /* global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: unset; whenever possible, web authors should instead use the
font-variant shorthand property or an associated longhand property such as
font-variant-ligatures,
font-variant-caps,
font-variant-east-asian,
font-variant-alternates,
font-variant-numeric or
font-variant-position. these lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an opentype font feature. in particular, font-feature-settings shouldn't be used to enable small caps. values ...
@font-face - CSS: Cascading Style Sheets
yle a font-style value. since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg 50deg; font-weight a font-weight value. since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400;
font-variant a
font-variant value. font-feature-settings allows control over advanced typographic features in opentype fonts. font-variation-settings allows low-level control over opentype or truetype font variations, by specifying the four letter axis names of the features to vary, along with their variation values. src specifies the resource containing the font data. this can be a url to a remote f...
...within a css selector. ...
...lector. ...
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
ed with old-browser behaviors in mind, mozilla and related browsers will mimic old browsers when in "quirks" mode. to do this, the gecko rendering engine uses the following rule in the quirk.css user agent file: /* quirk: cut off all font inheritance in tables and captions except for family. */ table, caption { font-size: -moz-initial; font-weight: -moz-initial; font-style: -moz-initial;
font-variant: -moz-initial; } this rule sets all aspects of a table's font, except for the font family, to match the user's preferences setting, thus emulating the behavior of old browsers. this only happens when gecko is in "quirks" mode; in "standards" mode, all styles are inherited by tables as permitted by the css specification. in those cases where it is necessary to author documents in "quirks" mode, b...
...hat is or isn't part of css. overcoming legacy behavior all that is needed is a rule that overrides the -moz-initial values with the css2 value inherit. this value is used to force an element to use the same value as its parent element for a given property. /* rule to fix quirks-mode inheritance behavior */ table, caption { font-size: inherit; font-weight: inherit; font-style: inherit;
font-variant: inherit; } this rule will override the rule in quirk.css and thus allow the author to have reliable inheritance of font styles into tables when in "quirks" mode. it is also fully valid css2 and so will validate without incident. recommendations in situations where authors must put a document into "quirks" mode but wish to enforce correct font inheritance into tables, use the demonstrated ru...
ARIA: grid role - Accessibility
r> <tr role="row"> <th scope="row" role="rowheader">week 40</th> <td role="gridcell" tabindex="-1"> 30 </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> css body { margin: 2rem; font-family: "helvetica neue", sans-serif; } table { margin: 0; border-collapse: collapse;
font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } } javascript var selectables = document.queryselectorall('table td[role="gr...
... 4 </td> <td role="gridcell" tabindex="-1"> 5 </td> <td role="gridcell" tabindex="-1"> 6 </td> <td role="gridcell" tabindex="-1"> 7 </td> <td role="gridcell" tabindex="-1"> 8 </td> </tr> <!-- … additional rows … --> </tbody> </table> css table { margin: 0; border-collapse: collapse;
font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'...
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
e (display: inline) by default, though its default styling varies from one browser to another: some browsers, like internet explorer, do not style it differently than a <span> element. opera, firefox, and some others add a dotted underline to the content of the element. a few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like
font-variant: none in the css takes care of this case. examples marking up an abbreviation semantically to mark up an abbreviation without providing an expansion or description, simply use <abbr> without any attributes, as seen in this example. html <p>using <abbr>html</abbr> is fun and easy!</p> result styling abbreviations you can use css to set a custom style to be used for abbreviations, as see...
...reviation without providing an expansion or description, simply use <abbr> without any attributes, as seen in this example. html <p>using <abbr>html</abbr> is fun and easy!</p> result styling abbreviations you can use css to set a custom style to be used for abbreviations, as seen in this simple example. html <p>using <abbr>css</abbr>, you can style your abbreviations!</p> css abbr {
font-variant: all-small-caps; } result providing an expansion adding a title attribute lets you provide an expansion or definition for the abbreviation or acronym. html <p>ashok's joke made me <abbr title="laugh out loud">lol</abbr> big time.</p> result defining an abbreviation you can use <abbr> in tandem with <dfn> to more formally define an abbreviation, as shown here. html <p><dfn id="html">...
SVG Presentation Attributes - SVG: Scalable Vector Graphics
an be used as attributes on svg elements. ...
...f lowercase letters rather than the height of capital letters. value: <number>|none|inherit; animatable: yes font-stretch it selects a normal, condensed, or expanded face from a font. value: see css font-stretch; animatable: yes font-style it specifies whether a font should be styled with a normal, italic, or oblique face from its font-family. value: normal|italic|oblique; animatable: yes
font-variant it specifies whether a font should be used with some of their variation such as small caps or ligatures. value: see css
font-variant; animatable: yes font-weight it specifies the weight (or boldness) of the font. value: normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; animatable: yes glyph-orientation-horizontal deprecated since svg 2 it controls glyph orientation when the i...
SVG Attribute reference - SVG: Scalable Vector Graphics
ype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style
font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l ...
...on attributes can be used as css properties. ...
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
polygon implemented. text module text implemented. various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi,
font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented. various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orienta...
...mented attributes: textlength, lengthadjust tspan implemented. various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi,
font-variant, text-decoration svgtspanelement recently implemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tref this feature, present in early draft of the spec, has been removed from it and is therefor not implemented (bug 273171). textpath implemented. rec...
CSS3 - Archive of obsolete content
font-kerning property. the choice of language-specific glyphs via the css font-language-override property. the choice of glyphs with specific opentype features via the css font-feature-settings property. the control of the aspect ratio to use when fallback fonts are selected via the css font-size-adjust property. the choice of alternative font faces using the css font-stretch,
font-variant-alternates,
font-variant-caps,
font-variant-east-asian,
font-variant-ligatures,
font-variant-numeric, and
font-variant-position properties. it also extends the related css
font-variant shorthand property and introduces the @font-feature-values at-rule. the control of the automatic generation of an oblique or bold face when none are found via the css font-synthesis property. ...
Web fonts - Learn web development
ts of the same font, you can specify what their weight/style is and then use different values of font-weight/font-style to choose between them, rather than having to call all the different members of the font family different names. @font-face tip: define font-weight and font-style to keep your css simple by roger johansson shows what to do in more detail. note: you can also specify particular
font-variant and font-stretch values for your web fonts. in newer browsers, you can also specify a unicode-range value, which is a specific range of characters you want to use out of the web font — in supporting browsers, only the specified characters will be downloaded, saving unnecessary downloading. creating custom font stacks with unicode-range by drew mclellan provides some useful ideas on how to make ...
FontFace.variant - Web APIs
syntax var variantsubproperty = fontface.variant; fontface.variant = variantsubproperty; value a cssomstring containing a descriptor as it would be defined in a style sheet's @font-face rule. ...
FontFace - Web APIs
tor. fontface.style a cssomstring that retrieves or sets the style of the font. it is equivalent to the font-style descriptor. fontface.unicoderange a cssomstring that retrieves or sets the range of unicode codepoints encompassing the font. it is equivalent to the unicode-range descriptor. fontface.variant a cssomstring that retrieves or sets the variant of the font. it is equivalent to the
font-variant descriptor. fontface.weight a cssomstring that contains the weight of the font. it is equivalent to the font-weight descriptor. methods this interface doesn't inherit any method. fontface.load() loads a font based on current object's constructor-passed requirements, including a location or source buffer, and returns a promise that resolves with the current fontface object. specificatio...
Index - Web APIs
property of the fontface interface retrieves or sets the range of unicode codepoints encompassing the font. it is equivalent to the unicode-range descriptor. 1402 fontface.variant api, css font loading api, fontface, fonts, property, reference, variant the variant property of the fontface interface programatically retrieves or sets font variant values. it is equivalent to the
font-variant descriptor. 1403 fontface.weight api, css font loading api, fontface, fonts, property, reference, weight the weight property of the fontface interface retrieves or sets the weight of the font. it is equivalent to the font-weight descriptor. 1404 family api, css font loading api, fontface, fonts, property, reference, family the fontface.family property all...
At-rules - CSS: Cascading Style Sheets
port for small screen devices. (currently at the working draft stage) @counter-style — defines specific counter styles that are not part of the predefined set of styles. (at the candidate recommendation stage, but only implemented in gecko as of writing) @font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant) — define common names in
font-variant-alternates for feature activated differently in opentype. (at the candidate recommendation stage, but only implemented in gecko as of writing) conditional group rules much like the values of properties, each at-rule has a different syntax. nevertheless, several of them can be grouped into a special category named conditional group rules. these statements share a common syntax and each of ...
CSS Properties Reference - CSS: Cascading Style Sheets
border-top-style bordertopstyle border-top-width bordertopwidth border-width borderwidth clear clear clip clip color color cursor cursor display display filter filter float cssfloat font font font-family fontfamily font-size fontsize
font-variant fontvariant font-weight fontweight height height left left letter-spacing letterspacing line-height lineheight list-style liststyle list-style-image liststyleimage list-style-position liststyleposition list-style-type liststyletype margin margin margin-bottom marg...
CSS reference - CSS: Cascading Style Sheets
ine):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesis
font-variantfont-variant (@font-face)
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngri...
Shorthand properties - CSS: Cascading Style Sheets
kground for more detailed information, including css3 properties. font properties the following declarations ... font-style: italic; font-weight: bold; font-size: .8em; line-height: 1.2; font-family: arial, sans-serif; ... can be shortened to the following: font: italic bold .8em/1.2 arial, sans-serif; this shorthand declaration is actually equivalent to the longhand declarations above plus
font-variant: normal and font-size-adjust: none (css2.0 / css3), font-stretch: normal (css3). border properties with borders, the width, color, and style can be simplified into one declaration. for example, the following css ... border-width: 1px; border-style: solid; border-color: #000; ... can be simplified as: border: 1px solid #000; margin and padding properties shorthand versions of margin and pad...
WebKit CSS extensions - CSS: Cascading Style Sheets
webkit-column-gap -webkit-column-rule -webkit-column-rule-color -webkit-column-rule-style -webkit-column-rule-width -webkit-column-span -webkit-column-width -webkit-columns f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-wrap -webkit-font-feature-settings -webkit-font-kerning -webkit-
font-variant-ligatures g-j -webkit-grid -webkit-grid-area -webkit-grid-auto-columns -webkit-grid-auto-flow -webkit-grid-auto-rows -webkit-grid-column -webkit-grid-column-end -webkit-grid-column-gap -webkit-grid-column-start -webkit-grid-gap -webkit-grid-row -webkit-grid-row-end -webkit-grid-row-gap -webkit-grid-row-start -webkit-grid-template -webkit-grid-template-areas -webkit-grid-templ...
<acronym> - HTML: Hypertext Markup Language
the convenience of the author, its default styling varies from one browser to another: some browsers, like internet explorer, do not style it differently than a <span> element. opera, firefox, chrome, and some others add a dotted underline to the content of the element. a few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like
font-variant: none in the css takes care of this case. it is therefore recommended that web authors either explicitly style this element, or accept some cross-browser variation. specifications specification status comment html 4.01 specificationthe definition of '<acronym>' in that specification. recommendation browser compatibility the compatibility table in thi...
<font-face> - SVG: Scalable Vector Graphics
the <font-face> svg element corresponds to the css @font-face rule. it defines a font's outer properties. usage context categoriesfont elementpermitted contentany number of descriptive elements » and at most one <font-face> element, in any order. ...
<text> - SVG: Scalable Vector Graphics
ength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. ...
SVG documentation index - SVG: Scalable Vector Graphics
tch needsexample, svg, svg attribute the font-stretch attribute indicates the desired amount of condensing or expansion in the glyphs used to render the text. 83 font-style css, font style, italic, oblique, svg, svg attribute, text, type, font the font-style attribute specifies whether the text is to be rendered using a normal, italic, or oblique face. 84
font-variant svg, svg attribute the
font-variant attribute indicates whether the text is to be rendered using variations of the fontʼs glyphs. 85 font-weight svg, svg attribute the font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family. 86 format deprecated, svg, svg attribu...
Texts - SVG: Scalable Vector Graphics
patterns, which makes simple coloring text in svg very powerful compared to css 2.1. setting font properties an essential part of a text is the font in which it is displayed. svg offers a set of attributes, many similar to their css counterparts, to enable font selection. each of the following properties can be set as an attribute or via a css declaration: font-family, font-style, font-weight,
font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration. other text-related elements tspan this element is used to mark up sub-portions of a larger text. it must be a child of a text element or another tspan element. a typical usecase is to paint one word of a sentence bold red. <text> this is <tspan font-weight="bold" fill="red">bold and red</t...