font-weight - CSS: Cascading Style Sheets
in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
... 451) will be translated to one of these values for non-variable fonts using the fallback weights system.
... css fonts level 4 extends the syntax to accept any number between 1 and 1000 and introduces variable fonts, which can make use of this much finer-grained range of font weights.
...And 6 more matches

Mozilla Web Developer FAQ
does mozilla support downloadable fonts?
... downloadable fonts in truetype and opentype formats (.ttf and .otf) are supported since firefox 3.5.
... the fonts have to be served from the same origin (protocol, host, port) as the content that uses them unless the fonts are served with the appropriate cross-origin resource sharing http headers.
...And 5 more matches

font-family - CSS: Cascading Style Sheets
the font-family property specifies a list of fonts, from highest priority to lowest.
...rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried.
... <generic-name> generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available.
...And 5 more matches

font-stretch - CSS: Cascading Style Sheets
css fonts level 4 extends the syntax to accept a <percentage> value as well.
... this enables variable fonts to offer something more like a continuum of character widths.
... for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths.
...And 5 more matches

nsIHTMLEditor
isvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aevent); void getalignment(out boolean amixed, out short aalign); astring getbackgroundcolorstate(out boolean amixed); nsidomelement getelementorparentbytagname(in astring atagname, in nsidomnode anode); astring getfontcolorstate(out boolean amixed); astring getfontfacestate(out boolean amixed); astrin...
...out boolean adt, out boolean add); void getliststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring getparagraphstate(out boolean amixed); nsidomelement getselectedelement(in astring atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asource...
... decreasefontsize() decrease font size for text in selection by 1 html unit all existing text is scanned for existing <font size> attributes so they will be decreased instead of inserting new <font> tag.
...And 3 more matches

font-style - CSS: Cascading Style Sheets
variable fonts variable fonts can offer a fine control over the degree to which an oblique face is slanted.
... for truetype or opentype variable fonts, the "slnt" variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values.
... for the example below to work, you'll need a browser that supports the css fonts level 4 syntax in which font-style: oblique can accept an <angle>.
...And 3 more matches

Index - Learn web development
assets, beginner, composing, content, deprecated, design, fonts, learn, simple, l10n:priority, step by step before doing anything, you need some ideas.
... 160 styling text beginner, css, codingscripting, fonts, landing, links, module, text, font, letter, line, lists, shadow, web fonts with the basics of the css language covered, the next css topic for you to concentrate on is styling text — one of the most common things you'll do with css.
...we round off the module by looking at applying custom fonts to your page, and styling lists and links.
...And 2 more matches

@font-face - CSS: Cascading Style Sheets
syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use.
... font-feature-settings allows control over advanced typographic features in opentype fonts.
... by allowing authors to provide their own fonts, @font-face makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available).
...And 2 more matches

font-variation-settings - CSS: Cascading Style Sheets
in order to use variable fonts on your operating system, you need to make sure that it is up to date.
... for example linux oses need the latest linux freetype version, and macos prior to 10.13 does not support variable fonts.
... if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools.
...And 2 more matches

The Web Open Font Format (WOFF) - Developer guides
many font vendors that are unwilling to license their truetype or opentype format fonts for use on the web will license woff format fonts.
... this improves availability of fonts to site designers.
... using woff you can use the @font-face css property to use woff fonts for text in web content.
...And 2 more matches

Authoring MathML - MathML
note that ua string sniffing is not the most reliable method and might break from version to version: var ua = navigator.useragent; var isgecko = ua.indexof("gecko") > -1 && ua.indexof("khtml") === -1 && ua.indexof('trident') === -1; var iswebkit = ua.indexof('applewebkit') > -1 && ua.indexof('chrome') === -1; mathematical fonts in order to get a good layout or to allow different style, it's important to have mathematical fonts available.
... it's always good to provide a link to mdn's font instructions, so that your visitors can verify whether they have appropriate fonts installed on their system.
... it's also good to provide a fallback with web fonts.
...And 2 more matches

SVG documentation index - SVG: Scalable Vector Graphics
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.
... 286 svg fonts advanced, needsupdate, svg, svg:tutorial when svg was specified, support for web fonts was not widespread in browsers.
...the one is the inclusion and display of text in an image, and the other are svg fonts.
...And 2 more matches

CSS3 - Archive of obsolete content
css fonts module level 3 candidate recommendation since september 20th, 2018 amends the css2.1 font 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 aspect ratio to use when fallback fonts are selected via the css font-size-adjust property.
... motion path module level 1 working draft css fonts module level 4 working draft css easing functions level 1 working draft css logical properties and values level 1 editor's draft modules in the revising phase modules that are in the revising phase are much less stable than those in the refining phase.

Browser Feature Detection - Archive of obsolete content
e borderbottomwidth true true true borderleftwidth true true true borderwidth true true true clear true true true color true true true display true true true cssfloat true false true font true true true fontfamily true true true fontsize true true true fontstyle true true true fontvariant true true true fontweight true true true height true true true letterspacing true true true lineheight true true true liststyle true true true liststyleimage true true true liststyle...
... counterincrement true false true counterreset true false true cue true false false cueafter true false false cuebefore true false false cursor true true true direction true true true elevation true false false emptycells true false true fontsizeadjust true false true fontstretch true false true left true true true markeroffset true false true marks true false true maxheight true ie7 only true maxwidth true ie7 only true minheight true true true minwidth true ie7 only true orp...
..., {name: 'borderbottomwidth', 'supported': false}, {name: 'borderleftwidth', 'supported': false}, {name: 'borderwidth', 'supported': false}, {name: 'clear', 'supported': false}, {name: 'color', 'supported': false}, {name: 'display', 'supported': false}, {name: 'cssfloat', 'supported': false}, {name: 'font', 'supported': false}, {name: 'fontfamily', 'supported': false}, {name: 'fontsize', 'supported': false}, {name: 'fontstyle', 'supported': false}, {name: 'fontvariant', 'supported': false}, {name: 'fontweight', 'supported': false}, {name: 'height', 'supported': false}, {name: 'letterspacing', 'supported': false}, {name: 'lineheight', 'supported': false}, {name: 'liststyle', 'supported': false}, {name: 'liststyleimage', 'supported': false}, {name: 'liststyle...
..., {name: 'counterincrement', 'supported': false}, {name: 'counterreset', 'supported': false}, {name: 'cue', 'supported': false}, {name: 'cueafter', 'supported': false}, {name: 'cuebefore', 'supported': false}, {name: 'cursor', 'supported': false}, {name: 'direction', 'supported': false}, {name: 'elevation', 'supported': false}, {name: 'emptycells', 'supported': false}, {name: 'fontsizeadjust', 'supported': false}, {name: 'fontstretch', 'supported': false}, {name: 'left', 'supported': false}, {name: 'markeroffset', 'supported': false}, {name: 'marks', 'supported': false}, {name: 'maxheight', 'supported': false}, {name: 'maxwidth', 'supported': false}, {name: 'minheight', 'supported': false}, {name: 'minwidth', 'supported': false}, {name: 'orphans', 'supporte...

Styling tables - Learn web development
first of all, we've found a font on google fonts that is suitable for a table about punk bands.
... you can go there and find a different one if you like; you'll just have to replace our provided <link> element and custom font-family declaration with the ones google fonts gives you.
... first, add the following <link> element into your html head, just above your existing <link> element: <link href='https://fonts.googleapis.com/css?family=rock+salt' rel='stylesheet' type='text/css'> now add the following css into your style.css file, below the previous addition: /* typography */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; } thead th, tfoot th { font-family: 'rock salt', cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-align: center; } tfoot th { text-align: right; } there is nothing really specific to tables here; we are generally tweaking the font styling to make things easier to read: we have set a global sans-serif font stack; this is purely a stylistic choice.
...the default bold weight on the heading fonts is enough to differentiate their look.

Typesetting a community school homepage - Learn web development
fonts: first of all, download a couple of free-to-use fonts.
... because this is a college, the fonts should be chosen to give the page a fairly serious, formal, trustworthy feel — a serif site-wide font for the general text body, coupled with sans-serif or slab serif for the headings might be nice.
... use a suitable service to generate bulletproof @font-face code for these two fonts.
... previous overview: styling text in this module fundamental text and font styling styling lists styling links web fonts typesetting a community school homepage ...

CSS basics - Learn web development
fonts and text now that we've explored some css fundamentals, let's improve the appearance of the example by adding more rules and information to the style.css file.
... first, find the output from google fonts that you previously saved from what will your website look like?.
...it looks something like this: <link href="https://fonts.googleapis.com/css?family=open+sans" rel="stylesheet"> this code links your page to a style sheet that loads the open sans font family with your webpage.
... html { font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ font-family: "open sans", sans-serif; /* this should be the rest of the output you got from google fonts */ } note: anything in css between /* and */ is a css comment.

What will your website look like? - Learn web development
discusses the planning and design work you have to do for your website before writing code, including "what information does my website offer?", "what fonts and colors do i want?", and "what does my site do?" first things first: planning before doing anything, you need some ideas.
... note: complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on.
... font to choose a font: go to google fonts and scroll down the list until you find one you like.
... click the "* family selected" button in the panel at the bottom of the page ("*" depends on how many fonts you selected).

Perceived performance - Learn web development
selecting the right fonts is an art form, and can greatly improve the user experience.
... fonts can also harm user experience, especially if the fonts used need to be imported, and if the importing is not optimal, or if comic sans is used (kidding).
... make fallback fonts the same size and weight so that when fonts load the page change is less noticeable.
... html performance features css performance features fonts and performance mobile performance focusing on performance ...

MathML Torture Test
mathml torture test html content <p> render mathematics with: <select name="mathfont" id="mathfont"> <option value="default" selected="selected">default fonts</option> <option value="asana">asana</option> <option value="cambria">cambria</option> <option value="dejavu">dejavu</option> <option value="latinmodern">latin modern</option> <option value="libertinus">libertinus</option> <option value="lucidabright">lucida bright</option> <option value="minion">minion</option> <option value="stixtwo">stix two</option> <option value="texgyrebonum">tex gyre bonum</option> <option value="texgyrepagella">tex gyre pagella</option> <option value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> ...
...it compares the rendering by the xetex engine using the default latin modern math font against the mathml rendering by your browser using the default math font, or an alternative opentype math fonts.
... to get the best rendering, be sure to have appropriate mathematical fonts installed on your system and to use a browser with opentype math support such as gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28) or higher.
... you may also try this test page for mathematical opentype fonts which instead relies on web fonts.

font-style - CSS: Cascading Style Sheets
the font-style css descriptor allows authors to specify font styles for the fonts specified in the @font-face rule.
...these fonts are specially created by font designers and are not artificially sloped.
... @font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; } specifications specification status comment css fonts module level 4the definition of 'font-style' in that specification.
... working draft adds oblique keyword with angle value css fonts module level 3the definition of 'font-style' in that specification.

src - CSS: Cascading Style Sheets
fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list.
...in the case of svg fonts, the url points to an element within a document containing svg font definitions.
...similarly, font container formats that can contain more than one font load only one of the fonts for a given @font-face rule.
...| local( <family-name> ) ]#where <family-name> = <string> | <custom-ident>+ examples specifying font resources using url() and local() @font-face { font-family: examplefont; src: local(example font), url('examplefont.woff') format("woff"), url('examplefont.otf') format("opentype"); } specifications specification status comment css fonts module level 3the definition of 'src' in that specification.

Using dns-prefetch - Web Performance
the cross-origin domain is then specified in the href attribute: syntax <link rel="dns-prefetch" href="https://fonts.gstatic.com/" > examples <html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> </head> <body> <!-- your page content --> </body> </html> you should place dns-prefetch hints in the <head> element any time your site references resources on cross-origin domains, but there are some things to keep in mind.
... second, it’s also possible to specify dns-prefetch (and other resources hints) as an http header by using the http link field: link: <https://fonts.gstatic.com/>; rel=dns-prefetch third, consider pairing dns-prefetch with the preconnect hint.
...you can safely use them together like so: <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> note: if a page needs to make connections to many third-party domains, preconnecting them all is counterproductive.
... some resources such as fonts are loaded in anonymous mode.

font-stretch - SVG: Scalable Vector Graphics
<tref>, and <tspan> usage notes value <font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> default value normal animatable yes specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
... working draft adds the <percentage> syntax for variable fonts.
... css fonts module level 3the definition of 'font-stretch' in that specification.
... candidate recommendation initial definition of font-stretch in css fonts scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-stretch' in that specification.

Writing Skinnable XUL and CSS - Archive of obsolete content
there should be no rules in navigator.css that attempt to define colors, fonts, etc.
...because the button is used in the navigator window (through overlays), the fonts/colors used should not be described by messenger.
...derived skin files should not contain any rules for colors, fonts, or borders.

Web performance resources - Learn web development
web fonts eot and ttf formats are not compressed by default.
...by using font display swap the browser will not block rendering and will use the backup system fonts that are defined.
... icon web fonts if possible avoid icon web fonts and use compressed svgs.

Embedding API for Accessibility
only, 2=no images */ moz 0.8 cookies setintpref("network.cookie.cookiebehavior", behavior); /* behavior: 0=accept, 1=accept cookies from originating server only, 2=no cookies */ setboolpref("network.cookie.warnaboutcookies", boolwarn); moz 0.8 fonts setcharpref("font.name.monospace.x-western", newfontname); setcharpref("font.name.serif.x-western", newfontname); setcharpref("font.name.sans-serif.x-western", newfontname); /* for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar,...
... th, ja, zh-cn or zh-tw */ setintpref("font.size.fixed.x-western", newfontsize); setintpref("font.size.variable.x-western", newfontsize); /* for other i18n charsets, change the name as explained above for font face*/ setcharpref("font.default","serif"); /* or "sans-serif" */ setintpref("browser.use_document_fonts", whichfonts); /* whichfonts: 0=no, 1=yes */ moz 0.8 fonts from operating system?
... setboolpref("browser.use_system_fonts", usesystemfonts); no colors for page setcharpref("browser.display.foreground_color", "#abcdef" /* hex color value */); setcharpref("browser.display.background_color", "#abcdef" /* hex color value */); setboolpref("browser.display.use_system_colors", boolsystemcolors); setboolpref("browser.display.use_document_colors", booluseauthorcolors); /* setting use_document_colors also stops background images from loading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex colo...

Mozilla’s UAAG evaluation report
zooming can be controlled via hotkeys ctrl+plus and ctrl+minus the prefs are at preferences, appearances, fonts there is also a hidden pref line that can be added to prefs.js, if you just want to change the minimum font size for a certain font: user_pref("font.minimum-size.x-western", newfontsizeinpoints); for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar, th, ja, zh-cn or zh-tw 4.2 configure font family.
... (p1) c can be changed through preferences or user style sheet the prefs are at preferences, appearances, fonts 4.3 configure text colors.
... css: text-indent: yes css: text-align: yes css: word-spacing: yes css: letter-spacing: yes css: font-stretch: ni css: margin: yes css: float: yes css: position: yes css: !important: yes css: system fonts: yes css: system colors: yes css: list types: yes css: outline: no css: :before, :after, content: p(oor) 8.2 conform to specifications.

Updates
complete support for stix fonts 1.0.
... june 11, 2010 stix fonts version 1.0 are now compatible with trunk.
... may 28, 2010 stix fonts version 1.0 released.

Midas
decreasefontsize this command will add a <small> tag around selection or at insertion point.
... fontsize a number this command will set the fontsize for a selection or at the insertion point if there is no selection.
... increasefontsize this command will add a <big> tag around selection or at insertion point.

UI Tour - Firefox Developer Tools
the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox developer edition 77 and later) fonts view animations view the following image shows the 3-pane mode (available from firefox 62 onwards) which moves the css rules view into a separate pane in the center of the inspector.
... fonts view the fonts view shows all the fonts in the page along with editable samples.
... see view fonts for more details.

Document.execCommand() - Web APIs
decreasefontsize adds a <small> tag around the selection or at the insertion point.
... fontsize changes the font size for the selection or at the insertion point.
...(not supported by internet explorer.) increasefontsize adds a <big> tag around the selection or at the insertion point.

FontFaceSet.load() - Web APIs
the load() method of the fontfaceset forces all the fonts given in parameters to be loaded.
...the promise is fulfilled when all the fonts are loaded; it is rejected if one of the fonts failed to load.
... document.fonts.load("12px myfont", "ß").then(…); specifications specification status comment css font loading module level 3the definition of 'load' in that specification.

FontFaceSet - Web APIs
fontfaceset.clear() removes all manually-added fonts from the font set.
... css-connected fonts are unaffected.
...css-connected fonts are unaffected.

TextMetrics - Web APIs
textmetrics.fontboundingboxascent read only is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in css pixels.
... textmetrics.fontboundingboxdescent read only is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in css pixels.
... if (baselinesbelowalphabetic.includes(baseline)) { liney = y + math.abs(textmetrics[baseline]); } ctx.moveto(0, liney); ctx.lineto(550, liney); ctx.stroke(); }); result measuring text width when measuring the x-direction of a piece of text, the sum of actualboundingboxleft and actualboundingboxright can be wider than the width of the inline box (width), due to slanted/italic fonts where characters overhang their advance width.

font-kerning - CSS: Cascading Style Sheets
in well-kerned fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be.
...for example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text.
... = document.getelementbyid('kern'); let nokern = document.getelementbyid('nokern'); input.addeventlistener('keyup', function() { kern.textcontent = input.value; /* update content */ nokern.textcontent = input.value; }); kern.textcontent = input.value; /* initialize content */ nokern.textcontent = input.value; specifications specification status comment css fonts module level 3the definition of 'font-kerning' in that specification.

font-size - CSS: Cascading Style Sheets
keywords keywords are a good way to set the size of fonts on the web.
...age> examples setting font sizes css .small { font-size: xx-small; } .larger { font-size: larger; } .point { font-size: 24pt; } .percent { font-size: 200%; } html <h1 class="small">small h1</h1> <h1 class="larger">larger h1</h1> <h1 class="point">24 point h1</h1> <h1 class="percent">200% h1</h1> result specifications specification status comment css fonts module level 4the definition of 'font-size' in that specification.
... css fonts module level 3the definition of 'font-size' in that specification.

font-synthesis - CSS: Cascading Style Sheets
description most standard western fonts include italic and bold variants, but many novelty fonts do not.
... fonts used for chinese, japanese, korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text.
...站直。</em> css em { font-weight: bold; } .syn { font-synthesis: style weight; } .no-syn { font-synthesis: none; } result specifications specification status comment css fonts module level 3the definition of 'font-synthesis' in that specification.

text-rendering - CSS: Cascading Style Sheets
one very visible effect is optimizelegibility, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, microsoft's calibri, candara, constantia, and corbel, or the dejavu font family).
...certain aspects of fonts — such as kerning — don't scale linearly.
... so this value can make text using those fonts look good.

Web Performance
web font performance an often overlooked aspect of performance landscape are web fonts.
... web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it.
...from there, we'll go on to talk about how browsers text, and how you can use css and javascript features to ensure your fonts render quickly, and with minimal disruption to the user experience.

Structural overview of progressive web apps - Progressive web apps (PWAs)
also included are a few images, scripts, and fonts.
... the file and folder hierarchy looks like this: app.js data/ games.js img/ favicon.ico fonts/ icons/ img/ bg.png js13kgames.png index.html js13kpwa.webmanifest style.css sw.js the html the html in the file index.html creates the structure of the app.
...this list includes both app shell and content files: var cachename = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/graduate.eot', '/pwa-examples/js13kpwa/fonts/graduate.ttf', '/pwa-examples/js13kpwa/fonts/graduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa...

font-weight - SVG: Scalable Vector Graphics
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.
... specifications specification status comment css fonts module level 4the definition of 'font-weight' in that specification.
... css fonts module level 3the definition of 'font-weight' in that specification.

method - SVG: Scalable Vector Graphics
as a result, for fonts with connected characters (e.g.
... cursive fonts), the connections may not align properly when text is rendered along the path.
...with this approach, connected characters, such as in cursive fonts, will maintain their connections.

New Skin Notes - Archive of obsolete content
--dria the menu column seems larger than before in the current test theme, so as to cause some reference pages to look ugly when browser set in 800x* resolution, using the default firefox 1.0.6 fonts settings on xfree86.
...that our screen resolutions are now wider than 800 pixels width does not mean that we always want to enlarge the window that large and as a result get extra-wide unreadable text lines :) and some people really are restricted to 800 (we can ignore 640, this will most likely require fonts settings changes as well).

Adding Style Sheets - Archive of obsolete content
the style sheet contains information such as the fonts, colors, borders, and size of elements.
...the style sheet applies various fonts, colors and borders to make the elements look more suitable.

Index - MDN Web Docs Glossary: Definitions of Web-related terms
for instance, script-src allows developers to allow trusted sources of script to execute on a page, while font-src controls the sources of web fonts.
... 147 first meaningful paint glossary, reference, web performance first meaningful paint (fmp) is the paint after which the biggest above-the-fold layout change has happened and web fonts have loaded.

Styling links - Learn web development
the final article in our styling text module details how to use custom fonts on your websites, or web fonts as they are better known.
... previous overview: styling text next in this module fundamental text and font styling styling lists styling links web fonts typesetting a community school homepage ...

Styling text - Learn web development
we round off the module by looking at applying custom fonts to your page, and styling lists and links.
... web fonts here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.

Video and Audio APIs - Learn web development
next, let's look at our button icons: @font-face { font-family: 'heydingscontrolsregular'; src: url('fonts/heydings_controls-webfont.eot'); src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/heydings_controls-webfont.woff') format('woff'), url('fonts/heydings_controls-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } button:before { font-family: heydingscontrolsregular; font-size: 20px; position: rel...
... icon fonts are very cool for many reasons — cutting down on http requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to style them — like color and text-shadow.

CSS performance optimization - Learn web development
@font-face { font-family: somefont; src: url(/path/to/fonts/somefont.woff) format('woff'); font-weight: 400; font-style: normal; font-display: fallback; } the contain property the contain css property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree.
... html performance features css performance features fonts and performance mobile performance focusing on performance see also css animation performance ...

Multimedia: Images - Learn web development
examples for these types of motifs are logos, illustrations, charts or icons (note: svgs are far better than icon fonts!).
... html performance features css performance features fonts and performance mobile performance focusing on performance ...

Encodings for localization files
this must match the charset= parameter in this file, and the win_installer_charset parameter in charset.mk the fontname/fontsize/charset parameters in this file must be set to good values.
...eastern scripts will need to choose appropriate fonts that are shipped with windows.

Basics
there are links to more samples, screenshots and instructions on how to download fonts for various platforms.
... these fonts are required to view other examples beyond the basic constructions illustrated here.

getFile
c constant string value notes ns_mac_desktop_dir ns_os_desktop_dir ns_mac_trash_dir "trsh" ns_mac_startup_dir "strt" ns_mac_shutdown_dir "shdwn" ns_mac_apple_menu_dir "applmenu" ns_mac_control_panels_dir "cntlpnl" ns_mac_extensions_dir "exts" ns_mac_fonts_dir "fnts" ns_mac_prefs_dir "prfs" ns_mac_documents_dir "docs" ns_mac_internet_search_dir "isrch" ns_osx_home_dir ns_os_home_dir ns_mac_home_dir ns_os_home_dir ns_mac_default_download_dir "dfltdwnld" ns_mac_user_lib_dir "ulibdir" // only available under os x ns_osx...
...n_send_to_dir "sndto" ns_win_bitbucket_dir "buckt" ns_win_startmenu_dir "strt" same thing as ns_os_desktop_dir ns_win_desktop_directory "deskp" file sys dir which physically stores objects on desktop ns_win_drives_dir "drivs" ns_win_network_dir "netw" ns_win_nethood_dir "neth" ns_win_fonts_dir "fnts" ns_win_templates_dir "tmpls" ns_win_common_startmenu_dir "cmstrt" ns_win_common_programs_dir "cmprgs" ns_win_common_startup_dir "cmstrt" ns_win_common_desktop_directory "cmdeskp" ns_win_appdata_dir "appdata" ns_win_local_appdata_dir "localappdata" ns_w...

Index - Firefox Developer Tools
60 edit fonts fonts, guide, inspector, tools, variable fonts this article provides a tour of the font tools available in the firefox devtools.
... this tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values.

CSS Font Loading API - Web APIs
fontfacesource a mixin providing all of the fonts used in font-related operations, unless defined otherwise.
... it defines the fontfacesources.fonts property available to document and workerglobalscope.

Cache - Web APIs
// we also only want to cache responses that correspond to fonts, // i.e.
... // all of the google web fonts are served off of a domain that supports cors, so that isn't an issue here.

FontFaceSet.check() - Web APIs
the check() method of the fontfaceset returns whether all fonts in the given font list have been loaded and are available.
... examples document.fonts.check("12px courier"); // returns true if the font courier is available at 12px document.fonts.check("12px myfont", "ß"); // returns true if the font 'myfont' has a ß character.

Using IIR filters - Web APIs
ld(canvasel); // set 2d context and set dimesions const canvasctx = canvasel.getcontext('2d'); const width = canvascontainer.offsetwidth; const height = canvascontainer.offsetheight; canvasel.width = width; canvasel.height = height; // set background fill canvasctx.fillstyle = 'white'; canvasctx.fillrect(0, 0, width, height); // set up some spacing based on size const spacing = width/16; const fontsize = math.floor(spacing/1.5); // draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = fontsize+'px sans-serif'; canvasctx.fillstyle = 'grey'; canv...
...asctx.filltext('1', spacing-fontsize, spacing+fontsize); canvasctx.filltext('g', spacing-fontsize, (height-spacing+fontsize)/2); canvasctx.filltext('0', spacing-fontsize, height-spacing+fontsize); canvasctx.filltext('hz', width/2, height-spacing+fontsize); canvasctx.filltext('20k', width-spacing, height-spacing+fontsize); // loop over our magnitude response data and plot our filter canvasctx.beginpath(); for(let i = 0; i < magresponseoutput.length; i++) { if (i === 0) { canvasctx.moveto(spacing, height-(magresponseoutput[i]*100)-spacing ); } else { canvasctx.lineto((width/totalarrayitems)*i, height-(magresponseoutput[i]*100)-spacing ); } } canvasctx.stroke(); summary that's it for our iirfilter demo.

unicode-range - CSS: Cascading Style Sheets
for users viewing the english version of a page, the font resources for greek and japanese fonts wouldn't need to be downloaded, saving bandwidth.
... html <div>me & you = us</div> css @font-face { font-family: 'ampersand'; src: local('times new roman'); unicode-range: u+26; } div { font-size: 4em; font-family: ampersand, helvetica, sans-serif; } result specifications specification status comment css fonts module level 3the definition of 'unicode-range' in that specification.

@font-feature-values - CSS: Cascading Style Sheets
this can help simplify your css when using multiple fonts.
... font one */ @font-feature-values font one { @styleset { nice-style: 12; } } /* at-rule for "nice-style" in font two */ @font-feature-values font two { @styleset { nice-style: 4; } } … /* apply the at-rules with a single declaration */ .nice-look { font-variant-alternates: styleset(nice-style); } specifications specification status comment css fonts module level 4the definition of '@font-feature-values' in that specification.

prefers-reduced-data - CSS: Cascading Style Sheets
in this example the montserrat-regular.woff2 font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fallback font: html <head> <link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin> <link rel="stylesheet" href="style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 400; font-display: swap; /* latin */ src: local('montserrat regular'), local...
...('montserrat-regular'), url('fonts/montserrat-regular.woff2') format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, "microsoft yahei", sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; } result specifications specification status comment media queries level 5the definition of 'reduced-data' in that specification.

Border-image generator - CSS: Cascading Style Sheets
t.join(' '); setoutputcss('outset', value); }; var setborderrepeat = function setborderrepeat(obj) { border_repeat[obj.value] = obj.name; var value = border_repeat.join(' '); preview.style.borderimagerepeat = value; setoutputcss('repeat', value); }; var setoutputcss = function setoutputcss(topic, value) { css_code[topic].textcontent = value + ';'; }; var setpreviewfontsize = function setpreviewfontsize(value) { preview.style.fontsize = value + 'px'; }; var setpreviewwidth = function setpreviewwidth(value) { preview.style.width = value + 'px'; }; var setpreviewheight = function setpreviewheight(value) { preview.style.height = value + 'px'; }; var setpreviewareaheight = function setpreviewareaheight(value) { preview_area.style.height = v...
... dropdownmanager.subscribe('image-repeat-x', setborderrepeat); dropdownmanager.subscribe('image-repeat-y', setborderrepeat); inputslidermanager.subscribe('preview-area-height', setpreviewareaheight); inputslidermanager.subscribe('preview-width', setpreviewwidth); inputslidermanager.subscribe('preview-height', setpreviewheight); inputslidermanager.subscribe('font-size', setpreviewfontsize); inputslidermanager.setvalue('preview-width', 300); inputslidermanager.setvalue('preview-height', 200); }; return { init: init, setoutputcss: setoutputcss, setborderslice: setborderslice }; })(); /** * init tool */ var init = function init() { inputslidermanager.init(); dropdownmanager.init(); buttonmanager.init(); unitpanel.init(); tool.init(); imag...

font-feature-settings - CSS: Cascading Style Sheets
the font-feature-settings css property controls advanced typographic features in opentype fonts.
... /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable stylistic set 7 */ .fancystyle { font-family: gabriola; /* available on windows 7, and on mac os */ font-feature-settings: "ss07"; } specifications specification status comment css fonts module level 3the definition of 'font-feature-settings' in that specification.

font-language-override - CSS: Cascading Style Sheets
for example, a lot of fonts have a special character for the digraph fi that merge the dot on the "i" with the "f." however, if the language is set to turkish the typeface will likely know not to use the merged glyph; turkish has two versions of the "i," one with a dot (i) and one without (ı), and using the ligature would incorrectly transform a dotted "i" into a dotless "i." the font-language-override property lets you o...
...mal syntax normal | <string> examples using danish glyphs html <p class="para1">default language setting.</p> <p class="para2">this is a string with the <code>font-language-override</code> set to danish.</p> css p.para1 { font-language-override: normal; } p.para2 { font-language-override: "dan"; } result specifications specification status comment css fonts module level 4the definition of 'font-language-override' in that specification.

font-optical-sizing - CSS: Cascading Style Sheets
description optical sizing is enabled by default for fonts that have an optical size variation axis.
... specifications specification status comment css fonts module level 4the definition of 'font-optical-sizing' in that specification.

font-size-adjust - CSS: Cascading Style Sheets
/* 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; /* global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: unset; 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.
...>this is the 10px times, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size: 10px; } .verdana { font-family: verdana, sans-serif; font-size: 10px; } .adjtimes { font-family: times, serif; font-size-adjust: 0.58; font-size: 10px; } results specifications specification status comment css fonts module level 3the definition of 'font-size-adjust' in that specification.

font-variant-alternates - CSS: Cascading Style Sheets
be aware that some existing fonts don't follow this advice.
...you can find a few free versions for testing purposes, for example from fontsgeek.com.

font-variant-caps - CSS: Cascading Style Sheets
fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them.
...titling-caps examples setting the small-caps font variant html <p class="small-caps">firefox rocks, small caps!</p> <p class="normal">firefox rocks, normal caps!</p> css .small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-variant-caps: normal; font-style: italic; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-caps' in that specification.

font-variant-east-asian - CSS: Cascading Style Sheets
as specifiedanimation typediscrete formal syntax normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os, other fonts may not support opentype features.
... <td class="traditional">大学</td> </tr> </tbody> </table> css td{ font-family:"yu gothic"; font-size:20px; } th{ color:grey; padding-right:10px; } .ruby { font-variant-east-asian: ruby; } .jis78 { font-variant-east-asian: jis78; } .traditional{ font-variant-east-asian: traditional; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-east-asian' in that specification.

font-variant-ligatures - CSS: Cascading Style Sheets
values> || <contextual-alt-values> ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ] examples setting font ligatures and contextual forms html <link href="//fonts.googleapis.com/css?family=lora" rel="stylesheet"> <p class="normal"> normal<br> if fi ff tf ft jf fj </p> <p class="none"> none<br> if fi ff tf ft jf fj </p> <p class="common-ligatures"> common-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-common-ligatures"> no-common-ligatures<br> if fi ff tf ft jf fj </p> <p class="discretionary-ligatures"> discretionary-ligatures<br> ...
...gatures { font-variant-ligatures: historical-ligatures; } .no-historical-ligatures { font-variant-ligatures: no-historical-ligatures; } .contextual { font-variant-ligatures: contextual; } .no-contextual { font-variant-ligatures: no-contextual; } .contextual { font-variant-ligatures: contextual; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-ligatures' in that specification.

font-variant - CSS: Cascading Style Sheets
| jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant html <p class="normal">firefox rocks!</p> <p class="small">firefox rocks!</p> css p.normal { font-variant: normal; } p.small { font-variant: small-caps; } result specifications specification status comment css fonts module level 3the definition of 'font-variant' in that specification.
... 1chrome android full support 18firefox android full support 4opera android full support 11safari ios full support 1samsung internet android full support 1.0css fonts module level 3 shorthandchrome full support 52edge full support 79firefox full support 34 full support 34 no support 33 — 34disabled disabled from version 33 until version 34 (exclusive): thi...

font - CSS: Cascading Style Sheets
<div class="propinputcont"> <input type="text" class="curcss" id="input_line_height"> <br/> line-height <br/> optional </div> <div class="propinputcont"> <input type="text" class="curcss mandatory" id="input_font_family"> <br/> font-family <br/> mandatory </div> </div> </form> <div class="fontshorthand"> this is some sample text.
...ementbyid(curelemname); curelem.value = oradio[i].value; return oradio[i].value; } } } setcss = function () { getproperties(); injectcss(shorttext); } injectcss = function(cssfragment) { old = document.body.getelementsbytagname("style"); if (old.length > 1) { old[1].parentelement.removechild(old[1]); } css = document.createelement("style"); css.innerhtml = ".fontshorthand{font: " + cssfragment + "}"; document.body.appendchild(css); } setcss(); specifications specification status comment css fonts module level 3the definition of 'font' in that specification.

Index - Developer guides
there are a number of possible scenarios: 39 svg-in-opentype draft, fonts, guide, needscontent the svg-in-opentype work is currently in the hands of the mpeg group.
... 41 the web open font format (woff) fonts, needsmobilebrowsercompatibility, woff woff (the web open font format) is a web font format developed by mozilla in concert with type supply, letterror, and other organizations.

contextmenu - HTML: Hypertext Markup Language
</li> <li contextmenu="changefont" id="fontsizing"> on this specific list element, you can change the size of the text by using the "increase/decrease font" actions from your context menu </li> <menu type="context" id="changefont"> <menuitem label="increase font" onclick="incfont()"></menuitem> <menuitem label="decrease font" onclick="decfont()"></menuitem> </menu> <li contextmenu="changeimage" id="ch...
...i am learning contextmenu from mdn via mozilla"); } function shareviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" + "https://developer.mozilla.org/en/html/element/using_html_context_menus"); } function incfont() { document.getelementbyid("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; } result specifications specification status comment ...

Preloading content with rel="preload" - HTML: Hypertext Markup Language
for example: resources that are pointed to from inside css, like fonts or images.
...you can see the full example source code on github (also see it live): <head> <meta charset="utf-8"> <title>web font example</title> <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin> <link href="style.css" rel="stylesheet"> </head> <body> … </body> not only are we providing the mime type hints in the type attributes, but we are also providing the crossorigin attribute to handle the cors issue.

Content-Security-Policy - HTTP
font-src specifies valid sources for fonts loaded using @font-face.
... content-security-policy: default-src 'self' http://example.com; connect-src 'none'; content-security-policy: connect-src http://example.com/; script-src http://example.com/ examples example: disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https: // header content-security-policy: default-src https: // meta tag <meta http-equiv="content-security-policy" content="default-src https:"> example: pre-existing site that uses too much inline code to fix but wants to ensure resources are loaded only over https and to disable plugins: content-security-policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object...

Populating the page: how browsers work - Web Performance
if your fonts, images, scripts, ads, and metrics all have different hostnames, a dns lookup will have to be made for each one.
...as this happens, the preload scanner will parse through the content available and request high priority resources like css, javascript, and web fonts.

Progressive web app structure - Progressive web apps (PWAs)
structure of our example application the js13kpwa website structure is quite simple: it consists of a single html file (index.html) with basic css styling (style.css), and a few images, scripts, and fonts.
... first imports data from the games.js file: self.importscripts('data/games.js'); next, it creates a list of all the files to be cached, both from the app shell and the content: var cachename = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/graduate.eot', '/pwa-examples/js13kpwa/fonts/graduate.ttf', '/pwa-examples/js13kpwa/fonts/graduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa...

font-family - SVG: Scalable Vector Graphics
specifications specification status comment css fonts module level 4the definition of 'generic font families' in that specification.
... css fonts module level 3the definition of 'font-family' in that specification.

font-style - SVG: Scalable Vector Graphics
specifications specification status comment css fonts module level 4the definition of 'font-style' in that specification.
... working draft no change css fonts module level 3the definition of 'font-style' in that specification.

font-variant - SVG: Scalable Vector Graphics
specifications specification status comment css fonts module level 4the definition of 'font-variant' in that specification.
... working draft no change css fonts module level 3the definition of 'font-variant' in that specification.

SVG Tutorial - SVG: Scalable Vector Graphics
introducing svg from scratch introduction getting started positions basic shapes paths fills and strokes gradients patterns texts basic transformations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials.
... scripting svg with javascript tbd svg filters tutorial tbd animations with smil in svg tbd creating fonts in svg tbd ...

Same-origin policy - Web security
fonts applied with @font-face.
... some browsers allow cross-origin fonts, others require same-origin.

Tutorials
we round off the module by looking at applying custom fonts to your page, and styling lists and links.
... quick guide to implement web fonts (with @font-face) the @font-face feature from css3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
fonts are sized in point (pt) units and use serif faces for improved legibility on a printed page.

Index - Archive of obsolete content
this makes it possible to write an extension that lets the user customize the appearance of specific web sites (setting the font size larger on sites that use obnoxiously small fonts, for instance).

Using content preferences - Archive of obsolete content
this makes it possible to write an extension that lets the user customize the appearance of specific web sites (setting the font size larger on sites that use obnoxiously small fonts, for instance).

Editor Embedding Guide - Archive of obsolete content
the above strings should be considered examples of base functionality and in no way imply that this command won't handle other fonts.

jspage - Archive of obsolete content
a in b){this.setstyle(a,b[a]); }return this;},getstyles:function(){var a={};array.flatten(arguments).each(function(b){a[b]=this.getstyle(b);},this);return a;}});element.styles=new hash({left:"@px",top:"@px",bottom:"@px",right:"@px",width:"@px",height:"@px",maxwidth:"@px",maxheight:"@px",minwidth:"@px",minheight:"@px",backgroundcolor:"rgb(@, @, @)",backgroundposition:"@px @px",color:"rgb(@, @, @)",fontsize:"@px",letterspacing:"@px",lineheight:"@px",clip:"rect(@px @px @px @px)",margin:"@px @px @px @px",padding:"@px @px @px @px",border:"@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)",borderwidth:"@px @px @px @px",borderstyle:"@ @ @ @",bordercolor:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zindex:"@",zoom:"@",fontweight:"@",textindent:"@px",opacity:"@"}); element.shortstyles={m...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
the font name to use (arial, for example) fontsize changes the font size used in the selected text.

Anonymous Content - Archive of obsolete content
the final modified content tree determines how css properties (e.g., fonts and colors) are inherited.

getFolder - Archive of obsolete content
"chrome" "components" "current user" "defaults" "file:///" "os drive" "plugins" "preferences" "profile" "program" "temporary" "mac apple menu" "mac control panel" "mac desktop" "mac documents" "mac extension" "mac fonts" "mac shutdown" "mac startup" "mac system" "mac trash" "mac preferences" "macosx default download" "macosx home" "macosx internet sites" "macosx local applications" "macosx local desktop" "macosx local documents" "macosx local frameworks" "macosx loc...

Complete - Archive of obsolete content
themes a theme changes the appearance of the user interface, affecting fonts, colours, graphics, and sometimes layout.

Creating a Skin - Archive of obsolete content
this includes colors, fonts and general widget appearances.

Skinning XUL Files by Hand - Archive of obsolete content
in a cascading stylesheet, the style definitions have the following basic form: element { style-attribute1: value; style-attribute2: value; style-attribute3: value; } for example, the following definition -- were it not in serious conflict with the many menu style definitions in the global skin -- makes all xul menus appear with a one pixel border, a light blue background, and 10 point fonts: menu { border: 1px; background-color: lightblue; font-size: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids.

XUL Questions and Answers - Archive of obsolete content
how can i use other fonts on xulrunner applications which are not installed on the current machine?

XUL accessibility guidelines - Archive of obsolete content
many users set their computers to use larger than normal fonts and/or specific color themes.

2006-10-13 - Archive of obsolete content
(user feels print belongs on the context menu along with back, reload, etc.) questions about programming for firefox a student questions how to create an extension that changes fonts, and how to capture website content before it is displayed.

Theme changes in Firefox 2 - Archive of obsolete content
toolkit/mozapps/preferences/fontscaling.xul - removed from firefox 2.

Implementing game control mechanisms - Game development
the game's folders look like this: as you can see there are folders for images, javascript files, fonts and sound effects.

2D maze game with device orientation - Game development
ction first: this.timer = 0; // time elapsed in the current level this.totaltimer = 0; // time elapsed in the whole game then, right after that, we can initialize the necessary text objects to display this information to the user: this.timertext = this.game.add.text(15, 15, "time: "+this.timer, this.fontbig); this.totaltimetext = this.game.add.text(120, 30, "total time: "+this.totaltimer, this.fontsmall); we’re defining the top and left positions of the text, the content that will be shown and the styling applied to the text.

Selector (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
ized { font: 16px lucida grande, arial, helvetica, sans-serif; } the selectors here are "p" (which applies the color green to the text inside any <p> element), "div.warning" (which makes any <div> element with the class "warning" look like a warning box), and "#customized", which sets the base font of the element with the id "customized" to 16-pixel tall lucida grande or one of a few fallback fonts.

Fetch directive - MDN Web Docs Glossary: Definitions of Web-related terms
for instance, script-src allows developers to allow trusted sources of script to execute on a page, while font-src controls the sources of web fonts.

First contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms
this excludes any content of iframes, but includes text with pending webfonts.

First Meaningful Paint - MDN Web Docs Glossary: Definitions of Web-related terms
first meaningful paint (fmp) is the paint after which the biggest above-the-fold layout change has happened and web fonts have loaded.

Glyph - MDN Web Docs Glossary: Definitions of Web-related terms
the fonts used by a website contain different sets of glyphs, which represent the characters of the font.

Images, media, and form elements - Learn web development
try changing how this form looks by adjusting the borders, adding background colors to the fields, and changing fonts and padding.

Organizing your CSS - Learn web development
defining variables css now has native custom properties, making this feature increasingly less important, however one of the reasons you might use sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project.

Learn to style HTML using CSS - Learn web development
we round off the module by looking at applying custom fonts to your page, and styling lists and links.

How can we design for all types of users? - Learn web development
we would advise the following: describe fonts in rem units, most browsers will be very happy with them; let older browsers display fonts with their own internal engine.

What are browser developer tools? - Learn web development
fonts: in firefox, the fonts tab shows the fonts applied to the current element.

What is a web server? - Learn web development
hosting files first, a web server has to store the website's files, namely all html documents and their related assets, including images, css stylesheets, javascript files, fonts, and video.

Test your skills: Styling basics - Learn web development
but your css should aim to fulfill the following requirements: add some kind of lightweight "reset" to make fonts, padding, margin, and sizing more consistent to begin with.

Getting started with the Web - Learn web development
what fonts and colors are you using?

Document and website structure - Learn web development
<!doctype html> <html> <head> <meta charset="utf-8"> <title>my page title</title> <link href="https://fonts.googleapis.com/css?family=open+sans+condensed:300|sonsie+one" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> <!-- the below three lines are a fix to get html5 semantic elements working in old versions of internet explorer--> <!--[if lt ie 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> ...

Getting started with HTML - Learn web development
(for example, changing fonts or colors, or altering the page layout) html and css work well together, as you will soon discover.

Structuring the web with HTML - Learn web development
after learning html, you can then move on to learning about more advanced topics such as: css, and how to use it to style html (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.) javascript, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make ui elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.) modules this topic contai...

A first splash into JavaScript - Learn web development
try entering the below lines, one by one: guesses.style.backgroundcolor = 'yellow'; guesses.style.fontsize = '200%'; guesses.style.padding = '10px'; guesses.style.boxshadow = '3px 3px 6px black'; every element on a page has a style property, which itself contains an object whose properties contain all the inline css styles applied to that element.

What is JavaScript? - Learn web development
css is a language of style rules that we use to apply styling to our html content, for example setting background colors and fonts, and laying out our content in multiple columns.

HTML performance features - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) ...

Measuring performance - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...

What is web performance? - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...

The business case for web performance - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...

JavaScript performance - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...

Multimedia: video - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...

The "why" of web performance - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...

Web performance - Learn web development
fonts and performance a look at whether you need to include external fonts and, if you do, how to include the fonts your design requires with the least impact on your sites performance.

Accessibility Features in Firefox
mozilla can follow the system appearance whether it's high or low contrast, with large or small fonts.

The Firefox codebase: CSS Guidelines
if you are not using windows, one way to test against those adjustments on other platforms is: going to about:preferences clicking on the "colors..." button in the "fonts & colors" sub-section of the "language and appearance" section under "override the colors specified by the page with your selections above", select the "always" option chrome area the automatic adjustments previously mentioned only apply to pages rendered in the content area.

Eclipse CDT Manual Setup
if you want to increase the text size in the editor, select "general > appearance > colors and fonts", select "basic > text font", and edit the font size.

Creating localizable web applications
bad: if you wish to use a non-standard font (as in the image above), take advantage of the css's on-line fonts feature available via @font-face.

Test
if not, please consider installing some mathml fonts.

MathML3Testsuite
the sections are marked with passed, failed, not-tested or some parts pass, giving the status of trunk builds with the appropriate fonts installed.

MathML In Action
in that case you are probably missing some crucial mathml fonts.

Mozilla MathML Project
links installing fonts for mozilla's mathml engine mathml version 3.0 - w3c recommendation, 21 october 2010 w3c mathml test suite - designed to check the implementation of each element one attribute (or built-in rendering behavior) at a time in a fairly thorough manner.

Gecko Roles
a font chooser is a component that lets the user pick various attributes for fonts.

inIDOMUtils
getusedfontfaces() returns a list of the fonts specified using @font-face in the specified portion of the document.

nsIAccessibleRole
a font chooser is a component that lets the user pick various attributes for fonts.

nsIDOMFontFace
attributes available for all fonts these attributes are always available.

nsILocale
nsilocale_messages - related to fonts, character encodings and so on.

nsIMarkupDocumentViewer
hintcharacterset acstring hintcharactersetsource print32 minfontsize long the minimum font size to allow.

Page inspector 3-pane mode - Firefox Developer Tools
the other css related features — such as computed styles view, animations view, and fonts view — in tabs on the right hand side, as usual.

How to - Firefox Developer Tools
css flexbox inspector: examine flexbox layoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...

Page Inspector - Firefox Developer Tools
how to to find out what you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...

CSSRule - Web APIs
css fonts module level 4the definition of 'cssrule' in that specification.

CSS Object Model (CSSOM) - Web APIs
screen orientation api working draft css fonts module level 3 candidate recommendation css animations working draft css transitions working draft css custom properties for cascading variables module level 1 candidate recommendation css conditional rules module level 3 candidate recommendation defined the css interface.

CanvasRenderingContext2D.font - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = 'bold 48px serif'; ctx.stroketext('hello world', 50, 100); result loading fonts with the css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas.

Document - Web APIs
document.fonts returns the fontfaceset interface of the current document.

Examples of web and XML development using the DOM - Web APIs
<!doctype html> <html lang="en"> <head> <title>changing color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document.

ElementCSSInlineStyle.style - Web APIs
note that the property names are in camel-case and not kebab-case while setting the style using elt.style.<property> (i.e., elt.style.fontsize, not elt.style.font-size).

FontFace.FontFace() - Web APIs
it can have the following keys: family: family style: style weight: weight stretch: stretch unicoderange: unicode range variant: variant featuresettings: feature settings example async function loadfonts() { const font = new fontface('myfont', 'url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with css class document.body.classlist.add('fonts-loaded'); } specifications specification status comment css font loading module level 3the definition of 'fontface cons...

FontFace.display - Web APIs
css fonts module level 4the definition of 'font-display' in that specification.

FontFace.family - Web APIs
example var fontface = new fontface('roboto', 'url(https://fonts.example.com/roboto.woff2)'); console.log(fontface.family); // 'roboto' fontface.family = 'newroboto'; console.log(fontface.family); // 'newroboto' specifications specification status comment css font loading module level 3the definition of 'family' in that specification.

Timing element visibility with the Intersection Observer API - Web APIs
body { font-family: "open sans", "arial", "helvetica", sans-serif; background-color: aliceblue; } .wrapper { display: grid; grid-template-columns: auto minmax(min-content, 1fr); grid-template-rows: auto minmax(min-content, 1fr); max-width: 700px; margin: 0 auto; background-color: aliceblue; } the site's <body> is configured here to use one of a number of common sans-serif fonts, and to use "aliceblue" as the background color.

PerformanceTiming.domInteractive - Web APIs
nevertheless there are a few caveats that happens if scripts are blocking rendering and not loaded asynchronously or with custom web fonts.

ResizeObserver() - Web APIs
of: function(entries, observer) { for (let entry of entries) { // do something to each entry // and possibly something to the observer itself } } examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications ...

ResizeObserver.observe() - Web APIs
examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); an observe() call with a...

ResizeObserver.unobserve() - Web APIs
examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistene...

ResizeObserver - Web APIs
> div'); const slider = document.queryselector('input[type="range"]'); const checkbox = document.queryselector('input[type="checkbox"]'); divelem.style.width = '600px'; slider.addeventlistener('input', () => { divelem.style.width = slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const entry of entries) { if (entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize / 600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width / 600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeven...

ResizeObserverEntry.contentRect - Web APIs
const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications ...

ResizeObserverEntry - Web APIs
const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications ...

SVGAltGlyphElement - Web APIs
æ, ß, etc ), special-purpose fonts (e.g.

TextMetrics.fontBoundingBoxAscent - Web APIs
the read-only fontboundingboxascent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in css pixels.

TextMetrics.fontBoundingBoxDescent - Web APIs
the read-only fontboundingboxdescent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in css pixels.

Accessibility: What users can do to browse more safely - Accessibility
use reader mode on browsers enable content blockers; gets rid of ads, reduces and/or removes distractions enables text-to-speech in certain browsers, enable fonts by choice enable page zoom turn off animated gifs in the browser browsers offer much power to their users; it's just a matter of knowing where to go.

Web Accessibility: Understanding Colors and Luminance - Accessibility
font size, font style (some fonts are so thin or fancy that they present accessibility problems on their own), background color, the size of the background space around the text, even pixel densities and more all affect how color is delivered from the screen.

font-display - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueautocomputed valueas specified formal syntax [ auto | block | swap | fallback | optional ] examples specifying fallback font-display @font-face { font-family: examplefont; src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback; } specifications specification status comment css fonts module level 4the definition of 'font-display' in that specification.

font-family - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuen/a (required)computed valueas specified formal syntax <family-name>where <family-name> = <string> | <custom-ident>+ examples setting the font family name @font-face { font-family: examplefont; src: url('examplefont.ttf'); } specifications specification status comment css fonts module level 3the definition of 'font-family' in that specification.

font-variation-settings - CSS: Cascading Style Sheets
ueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src: url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications specification status comment css fonts module level 4the definition of 'font-variation-settings' in that specification.

CSS Properties Reference - CSS: Cascading Style Sheets
bordertopcolor 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 ...

font-smooth - CSS: Cascading Style Sheets
the font-smooth css property controls the application of anti-aliasing when fonts are rendered.

font-variant-numeric - CSS: Cascading Style Sheets
/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/sourcesanspro-regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-numeric' in that specification.

font-variant-position - CSS: Cascading Style Sheets
| 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.

<length> - CSS: Cascading Style Sheets
on fonts with the "x" letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.

text-decoration-skip-ink - CSS: Cascading Style Sheets
this can be helpful with certain chinese, japanese, or korean (cjk) fonts, where the auto behavior might not create interruptions.

CSS: Cascading Style Sheets
we round off the module by looking at applying custom fonts to your page, and styling lists and links.

Rich-Text Editing in Mozilla - Developer guides
lue="p">paragraph &lt;p&gt;</option> <option value="pre">preformatted &lt;pre&gt;</option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatd...

Making content editable - Developer guides
lue="p">paragraph &lt;p&gt;</option> <option value="pre">preformatted &lt;pre&gt;</option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatd...

<basefont> - HTML: Hypertext Markup Language
the former behavior of the <font> element can be achieved, and even better controlled using the css fonts properties.

<font> - HTML: Hypertext Markup Language
the former behavior of the <font> element can be achieved, and even better controlled using the css fonts css properties.

<textarea> - HTML: Hypertext Markup Language
compared to other form elements it is relatively easy to style, with its box model, fonts, color scheme, etc.

<tr>: The Table Row element - HTML: Hypertext Markup Language
possible values for this attribute are: baseline aligns each cell's content text as closely as possible to the bottom of the cell, handling alignment of different fonts and font sizes by aligning the characters along the baseline of the font(s) used in the row.

HTML documentation index - HTML: Hypertext Markup Language
66 <basefont> element, fonts, html, layout, obsolete, reference, style, web, basefont the obsolete html base font element (<basefont>) sets a default font face, size, and color for the other elements which are descended from its parent element.

Common MIME types - HTTP
application/x-bzip2 .csh c-shell script application/x-csh .css cascading style sheets (css) text/css .csv comma-separated values (csv) text/csv .doc microsoft word application/msword .docx microsoft word (openxml) application/vnd.openxmlformats-officedocument.wordprocessingml.document .eot ms embedded opentype fonts application/vnd.ms-fontobject .epub electronic publication (epub) application/epub+zip .gz gzip compressed archive application/gzip .gif graphics interchange format (gif) image/gif .htm .html hypertext markup language (html) text/html .ico icon format image/vnd.microsoft.icon .ics icalendar format tex...

Reason: CORS request not HTTP - HTTP
to fix this problem, simply make sure you use https urls when issuing requests involving cors, such as xmlhttprequest, fetch apis, web fonts (@font-face), and webgl textures, and xsl stylesheets.

Cross-Origin Resource Sharing (CORS) - HTTP
web fonts (for cross-domain font usage in @font-face within css), so that servers can deploy truetype fonts that can only be cross-site loaded and used by web sites that are permitted to do so.

Content Security Policy (CSP) - HTTP
there are specific directives for a wide variety of types of items, so that each type can have its own policy, including fonts, frames, images, audio and video media, scripts, and workers.

CSP: font-src - HTTP
the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face.

Index - HTTP
for each of the following directives that are absent, the user agent will look for the default-src directive and will use this value for it: 34 csp: font-src csp, directive, http, reference, security the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face.

HTTP Index - HTTP
for each of the following directives that are absent, the user agent will look for the default-src directive and will use this value for it: 82 csp: font-src csp, content-security-policy, directive, http, reference, security, font, source the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face.

Closures - JavaScript
here's the javascript: function makesizer(size) { return function() { document.body.style.fontsize = size + 'px'; }; } var size12 = makesizer(12); var size14 = makesizer(14); var size16 = makesizer(16); size12, size14, and size16 are now functions that resize the body text to 12, 14, and 16 pixels, respectively.

Deprecated and obsolete features - JavaScript
string methods html wrapper methods like string.prototype.fontsize and string.prototype.big.

String.prototype.big() - JavaScript
examples using big() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <fontsize=7>hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.fontsize = '2em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.big' in that specification.

String.prototype.small() - JavaScript
examples using small() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <font size="7">hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.fontsize = '0.7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.small' in that specification.

String - JavaScript
string.prototype.anchor() <a name="name"> (hypertext target) string.prototype.big() <big> string.prototype.blink() <blink> string.prototype.bold() <b> string.prototype.fixed() <tt> string.prototype.fontcolor() <font color="color"> string.prototype.fontsize() <font size="size"> string.prototype.italics() <i> string.prototype.link() <a href="url"> (link to url) string.prototype.small() <small> string.prototype.strike() <strike> string.prototype.sub() <sub> string.prototype.sup() <sup> examples string conversion it's possible to use string as a more reliable tostring() alternative, as it works when used on null, undefined, and on ...

Values - MathML
(the "x"-height of the element, 1ex ≈ 0.5em in many fonts) px pixels in inches (1 inch = 2.54 centimeters) cm centimeters mm millimeters pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points) % percentage of the default value.

MathML attribute reference - MathML
the attributes background, color, fontfamily, fontsize, fontstyle, fontweight and xlink:href are deprecated.

Lazy loading - Web Performance
fonts by default, font requests are delayed until the render tree is constructed, which can result in delayed text rendering.

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
var cachename = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/graduate.eot', '/pwa-examples/js13kpwa/fonts/graduate.ttf', '/pwa-examples/js13kpwa/fonts/graduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa...

Graphic design for responsive sites - Progressive web apps (PWAs)
using fonts for icons another technique to consider is using web fonts for icons.

The building blocks of responsive design - Progressive web apps (PWAs)
using web fonts for displaying icons is an effective technique for keeping file size and http requests down, and this is supported well across modern and older browsers.

externalResourcesRequired - SVG: Scalable Vector Graphics
this attribute applies to all types of resource references, including style sheets, color profiles and fonts specified by a reference using a <font-face> element or a css @font-face specification.

font-size-adjust - SVG: Scalable Vector Graphics
specifications specification status comment css fonts module level 3the definition of 'font-size-adjust' in that specification.

font-size - SVG: Scalable Vector Graphics
specifications specification status comment css fonts module level 3the definition of 'font-size' in that specification.

panose-1 - SVG: Scalable Vector Graphics
all fonts will match the panose number if this value is used.

textLength - SVG: Scalable Vector Graphics
by using textlength, you can ensure that your svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet).

<font-face-src> - SVG: Scalable Vector Graphics
it serves as container for <font-face-name>, pointing to locally installed copies of this font, and <font-face-uri>, utilizing remotely defined fonts.

<glyph> - SVG: Scalable Vector Graphics
example svg <svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bo...

<vkern> - SVG: Scalable Vector Graphics
the <vkern> svg element allows to fine-tweak the vertical distance between two glyphs in top-to-bottom fonts.

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
parameter removed implementation status unknown fragment-only urls are always same-document implementation status unknown additional attributes on <a> implemented (bug 1451823) scripting change notes contentscripttype removed implementation status unknown animationevents.onload removed implementation status unknown fonts change notes <font>, <glyph>, <missing-glyph>, <hkern>, <vkern>, <font-face>, <font-face-src>, <font-face-uri>, <font-face-format>, and <font-face-name> and corresponding idl interfaces removed implementation status unknown extensibility chapter change notes made <foreignobject> graphics element implementation status unknown ...

Texts - SVG: Scalable Vector Graphics
the one is the inclusion and display of text in an image, and the other are svg fonts.

Mixed content - Web security
<object> (data attribute) navigator.sendbeacon (url attribute) other resource types like web fonts and workers may be considered active mixed content, as they are in chrome.

xml:base - XML: Extensible Markup Language
ewbox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"><![cdata[ .s9_999{ font-size: 9.17px; font-family: zapfdingbats_ghr; fill: #161615; } ]]></style> <text x="647" y="412" dx="0" class="s9_999" >r</text> <style type="text/css"><![cdata[ @font-face { font-family: zapfdingbats_ghr; src: url("fonts/zapfdingbats_ghr.woff") format("woff"); } ]]></style> </svg> setting the xml:base on the svg element means you can inline the svg and thereby bypass cors issue while not changing the base uri for your entire document.

Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
for basic control of appearance — fonts, colors, position, and so forth — gecko uses css.