Search completed in 1.53 seconds.
Web fonts - Learn web development
previous overview: styling text next in the first article of the module, we explored the basic css features available for styling
fonts and text.
... in this article we will go further, exploring web
fonts in detail — these allow you to download custom
fonts along with your web page, to allow for more varied, custom text styling.
... objective: to learn how to apply web
fonts to a web page, using either a third party service, or by writing your own code.
...And 50 more matches
Edit fonts - Firefox Developer Tools
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.
... the
fonts tab the
fonts tab is located on the right-hand side of the page inspector when it is docked to the bottom of the screen.
... when it is docked to the right or left sides of the screen, the
fonts tab appears beneath the html pane.
...And 29 more matches
Fonts for Mozilla 2.0's MathML engine
quick instructions try this test page to quickly determine whether you need to install additional
fonts and to follow the instructions below.
... on windows: use this mathml
fonts installer.
... on mac os x lion (10.7) and higher versions, stix
fonts are already installed and can be used for mathml.
...And 24 more matches
Fonts for Mozilla's MathML engine
fonts with appropriate unicode coverage and open font format features are required for good math rendering.
... this wiki page describes how users can install and use such math
fonts with mozilla's mathml engine.
... installation instructions windows install the latin modern math and stix
fonts as follows: download latinmodern-math-1959.zip.
...And 20 more matches
Variable fonts guide - CSS: Cascading Style Sheets
variable
fonts are an evolution of the opentype font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.
...this article will give you all you need to know to get you started using variable
fonts.
... warning: in order to use variable
fonts on your operating system, you need to make sure that it is up to date.
...And 15 more matches
CSS Fonts - CSS: Cascading Style Sheets
css
fonts is a module of css that defines font-related properties and how font resources are loaded.
...dth: 600px; margin: 0 auto; font-family: "helvetica neue", "arial", sans-serif; font-style: italic; font-weight: 100; font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1px; } <p>three hundred years ago<br> i thought i might get some sleep<br> i stretched myself out onna antique bed<br> an' my spirit did a midnite creep</p> the result is as follows: variable
fonts examples you can find a number of variable
fonts examples at v-
fonts.com and axis-praxis.org; see also our variable
fonts guide for more information and usage information.
... variable
fonts guide variable
fonts are an evolution of the opentype font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.
...And 3 more matches
Document.fonts - Web APIs
the
fonts property of the document interface returns the fontfaceset interface of the document.
... syntax let fontfaceset = document.
fonts; value the returned value is the fontfaceset interface of the document.
... the fontfaceset interface is useful for loading new
fonts, checking the status of previously loaded
fonts etc.
...And 2 more matches
String.prototype.fontsize() - JavaScript
the
fontsize() method creates a <font> html element that causes a string to be displayed in the specified font size.
... syntax str.
fontsize(size) parameters size an integer between 1 and 7, a string representing a signed integer between 1 and 7.
... examples using
fontsize() 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('your...
...elemid').style.
fontsize = '0.7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.
fontsize' in that specification.
SVG fonts - SVG: Scalable Vector Graphics
« previousnext » when svg was specified, support for web
fonts was not widespread in browsers.
... svg
fonts are currently supported only in safari and android browser.
... option: use css @font-face you can use @font-face to reference remote (and not so remote)
fonts: <font id="super_sans"> <!-- and so on --> </font> <style type="text/css"> @font-face { font-family: "super sans"; src: url(#super_sans); } </style> <text font-family="super sans">my text uses super sans</text> option: reference a remote font the above mentioned font-face-uri element allows you to reference an external font, hence allowing greater re-usability: <font> <font-face fon...
...t-family="super sans"> <font-face-src> <font-face-uri xlink:href="
fonts.svg#super_sans" /> </font-face-src> </font-face> </font> « previousnext » ...
Index - Web APIs
392 css font loading api api, cssfontloading, experimental,
fonts, needscontent, reference the css font loading api provides events and interfaces for dynamically loading font resources.
... 913 document.
fonts api, dom, font loading api, fontface, fontfaceset,
fonts, font the
fonts property of the document interface returns the fontfaceset interface of the document.
... 1392 focusevent.relatedtarget api, event, experimental, focusevent, property, reference the focusevent.relatedtarget read-only property is the secondary target, depending on the type of event: 1393 fontface api, css font loading api, fontface,
fonts, interface, reference the fontface interface represents a single usable font face.
...And 19 more matches
Fundamental text and font styling - Learn web development
you can't select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element's text), ::first-line (selects the first line of an element's text), or ::selection (selects the text currently highlighted by the cursor.)
fonts let's move straight on to look at properties for styling
fonts.
...but it was a rare occasion such as this that he did.</p> font families to set a different font on your text, you use the font-family property — this allows you to specify a font (or list of
fonts) for the browser to apply to the selected elements.
... web safe
fonts speaking of font availability, there are only a certain number of
fonts that are generally available across all systems and can therefore be used without much worry.
...And 15 more matches
font-stretch - CSS: Cascading Style Sheets
the font-stretch css descriptor allows authors to specify a normal, condensed, or expanded face for the
fonts specified in the @font-face rule.
...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.
...And 7 more matches
font-weight - CSS: Cascading Style Sheets
the font-weight css descriptor allows authors to specify font weights for the
fonts specified in the @font-face rule.
...
fonts lacking bold are often synthesized by the user agent.
... 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.
...And 7 more matches
OpenType font features guide - CSS: Cascading Style Sheets
some
fonts will have one or more of these features enabled by default (kerning and default ligatures are common examples), while others are left to the designer or developer to choose to enable in specific scenarios.
...the issue with simply using font-feature-settings for everything is that every time you want to change one of the individual features, you have to redefine the entire string (similar to manipulating variable
fonts with font-variation-settings).
... discovering availability of features in
fonts this is sometimes the trickiest thing to work out if you don't have any documentation that came with the
fonts (many type designers and foundries will provide sample pages and css just for this very reason).
...And 7 more matches
Styling web forms - Learn web development
fonts and text css font and text features can be used easily with any widget (and yes, you can use @font-face with form widgets).
...inheriting should change their
fonts to that of the parent's font family — in this case the default serif font of the parent container.
... a typewriter font: the "secret typewriter" font from
fontsquirrel.com — download the ttf file into the same directory as above.
...And 6 more matches
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 decrease
fontsize(); 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 increase
fontsize(); 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...
... decrease
fontsize() 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", new
fontsize); setintpref("font.size.variable.x-western", new
fontsize); /* 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", which
fonts); /* which
fonts: 0=no, 1=yes */ moz 0.8
fonts from operating system?
... setboolpref("browser.use_system_
fonts", usesystem
fonts); 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", new
fontsizeinpoints); 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
decrease
fontsize 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.
... increase
fontsize 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
decrease
fontsize 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.) increase
fontsize 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 setpreview
fontsize = function setpreview
fontsize(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', setpreview
fontsize); 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-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 ...
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.
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).
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...
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...
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.
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.
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.
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.
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.
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]--> ...
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/ ) ...
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.
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.
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 min
fontsize long the minimum font size to allow.
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.
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 load
fonts() { 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.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.
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 ...
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.
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-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.
Rich-Text Editing in Mozilla - Developer guides
lue="p">paragraph <p></option> <option value="pre">preformatted <pre></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 <p></option> <option value="pre">preformatted <pre></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...
<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.
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.
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...
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).
<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...