font-feature-settings - CSS: Cascading Style Sheets
the font-feature-settings css property controls advanced typographic features in opentype fonts. 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-feature-settings css property controls advanced typographic features in opentype fonts. 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. ...
...controls advanced typographic features in opentype fonts. 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 12 more matches

OpenType font features guide - CSS: Cascading Style Sheets
d within an opentype font. these include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. these are all referred to as opentype features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings. this article provides you with all you need to know about using opentype font features in css. some fonts will have one or more of these features enabled by default (kerning and default ligatures are common examples), while others are left to the designer or developer to choose to enable in specific scenarios. in addition to broad feature sets like ligatures or lining figures (numerals that li...
...ian languages. in the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other opentype features. caution: there are many css attributes defined to leverage font features, but unfortunately many are not fully implemented. they are all defined and shown here, but many will only work using the lower-level font-feature-settings property. it's possible to write css to work both ways but this can become cumbersome. the issue with simply using font-feature-settings for everything is that every time you want to change one of the individual features, you have to redefine the entire string (similar to manipulating variable fonts with font-variation-settings). discovering availability of features in fonts this is sometimes ...
...thand (font-variant) this is the shorthand syntax for defining all of the above. setting a value of normal resets all properties to their initial value. setting a value of none sets font-variant-ligatures to none and all other properties to their initial value. (meaning that if kerning is on by default, it will still be on even with a value of none being supplied here.) font feature settings font-feature-settings is the 'low level syntax' that allows explicit access to every named available opentype feature. this gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using css custom properties to set the values). because of this, it's best to use the standard ...
...And 6 more matches

CSS Fonts - CSS: Cascading Style Sheets
rs ago<br> i thought i might get some sleep<br> i stretched myself out onna antique bed<br> an' my spirit did a midnite creep</p> the result is as 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. ...
... opentyp...
...d within an opentype font. these include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. these are all referred to as opentype features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings. this article provides you with all you need to know about using opentype font features in css. variable fonts guide variable fonts are an evolution of the opentype font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. this article will give you all you need to kno...
...ery width, weight, or style. this article will give you all you need to know to get you started using variable fonts. ...

@font-face - CSS: Cascading Style Sheets
x 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 font file location or the name of a font on the...
...e following will not work: .classname { @font-face { font-family: myhelvetica; src: local("helvetica neue bold"), local("helveticaneue-bold"), url(mgopenmodernabold.ttf); font-weight: bold; } } formal syntax @font-face { [ font-family: <family-name>; ] | [ src: <src>; ] | [ unicode-range: <unicode-range>; ] | [ font-variant: <font-variant>; ] | [ font-feature-settings: <font-feature-settings>; ] | [ font-variation-settings: <font-variation-settings>; ] | [ font-stretch: <font-stretch>; ] | [ font-weight: <font-weight>; ] | [ font-style: <font-style>; ] }where <family-name> = <string> | <custom-ident>+ examples specifying a downloadable font this example simply specifies a downloadable font to use, applying it to the entire body of the document: vie...

CSS3 - Archive of obsolete content
nt matching algorithm to be closer to what is really implemented. adds: support for downloadable fonts via the css @font-face at-rule. the control of the contextual inter-glyph spacing via the css 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 short...

Fundamental text and font styling - Learn web development
roperties 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. 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. 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 t...

FontFace.featureSettings - Web APIs
syntax var featuresettingdescriptor = fontface.featuresettings; fontface.featuresettings = featuresettingdescriptor; value a cssomstring containing a descriptor. ...

FontFace - Web APIs
mines how a font face is displayed based on whether and when it is downloaded and ready to use. fontface.family a cssomstring that retrieves or sets the family of the font. it is equivalent to the font-family descriptor. fontface.featuresettings a cssomstring that retrieves or sets infrequently used font features that are not available from a font's variant properties. it is equivalent to the font-feature-settings descriptor. fontface.loaded read only returns a promise that resolves with the current fontface object when the font specified in the object's constructor is done loading or rejects with a syntaxerror. fontface.status read only returns an enumerated value indicating the status of the font, one of "unloaded", "loading", "loaded", or "error". fontface.stretch a cssomstring that retrieves o...

Index - Web APIs
and ready to use. this property is equivalent to the css font-display descriptor. 1396 fontface.featuresettings api, css font loading api, fontface, fonts, property, reference, featuresettings the featuresettings property of the fontface interface retrieves or sets infrequently used font features that are not available from a font's variant properties. it is equivalent to the font-feature-settings descriptor. 1397 fontface.load api, css font loading api, fontface, fonts, method, reference, load the load() method of the fontface interface 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. 1398 fontface.status api, css font load...

::first-letter (:first-letter) - CSS: Cascading Style Sheets
::first-letter will match the first letter of this generated content. css3 introduced the ::first-letter notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-letter, introduced in css2. ...

::first-line (:first-line) - CSS: Cascading Style Sheets
. browsers also accept :first-line, introduced in css2. ...

Variable fonts guide - CSS: Cascading Style Sheets
is names must be in lower case, and custom axes must be in upper case. for example: font-variation-settings: 'wght' 375, 'grad' 88; wght (weight) is a registered axis, and grad (grade) is a custom one. if you have set values using font-variation-settings and want to change one of those values, you must redeclare all of them (in the same way as when you set opentype font features using font-feature-settings). you can work around this limitation by using css custom properties (css variables) for the individual values, and simply modifying the value of an individual custom property. example code follows at the end of the guide. weight weight (represented by the wght tag) defines the design axis of how thin or thick (light or heavy, in typical typographic terms) the strokes of the letterforms can ...

Mozilla CSS extensions - CSS: Cascading Style Sheets
xed version still accepted] -moz-column-width [prefixed version still accepted] -moz-column-rule [prefixed version still accepted] -moz-column-rule-width [prefixed version still accepted] -moz-column-rule-style [prefixed version still accepted] -moz-column-rule-color [prefixed version still accepted] -moz-context-properties f–m filter [applying to more than svg] -moz-font-feature-settings [prefixed version still accepted] -moz-font-language-override [prefixed version still accepted] -moz-hyphens [prefixed version still accepted] -moz-margin-end [superseded by the standard version margin-inline-end] -moz-margin-start [superseded by the standard version margin-inline-start] mask [applying to more than svg] o -moz-opacityobsolete since gecko 1.9.1 -moz-outlin...

CSS reference - CSS: Cascading Style Sheets
egacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):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-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settin...

WebKit CSS extensions - CSS: Cascading Style Sheets
ip-path -webkit-column-count -webkit-column-fill -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 -we...