MozillaWiki

Evangelism/Firefox3.5/35Days/Articles/@font-face: Difference between revisions

Page Discussion

Evangelism/Firefox3.5/35Days/Articles/@font-face (view source)

Revision as of 17:57, 9 June 2009

1,263 bytes added ,  9 June 2009
no edit summary
No edit summary
No edit summary
Line 3: Line 3:
== Introducing <code>@font-face</code> ==
== Introducing <code>@font-face</code> ==


Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, multiple weights, along with support for rendering complex scripts.  But authors are still limited to using commonly available fonts in their designs.  Firefox 3.5 removes this restriction by introducing support for the CSS @font-face rule, a way of linking to TrueType and OpenType fonts just as code and images are linked to today.
Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, multiple weights, along with support for rendering complex scripts.  But authors are still limited to using commonly available fonts in their designs.  Firefox 3.5 removes this restriction by introducing support for the CSS @font-face rule, a way of linking to TrueType and OpenType fonts just as code and images are linked to today.  Safari since version 3.1 supports this type of font linking and Opera has announced planned support in Opera 10.


Using @font-face for font linking is relatively straightforward.  Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded and the style characteristics of a given face such as whether it's bold or italic.  Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.
Using @font-face for font linking is relatively straightforward.  Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded and the style characteristics of a given face such as whether it's bold or italic.  Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.
Line 63: Line 63:
   src: local("Helvetica Neue"),  
   src: local("Helvetica Neue"),  
       local("HelveticaNeue"),  
       local("HelveticaNeue"),  
       url(fonts/MgOpenModernaRegular.ttf);
       url(MgOpenModernaRegular.ttf);
}
}


Line 70: Line 70:
   src: local("Helvetica Neue Bold"),  
   src: local("Helvetica Neue Bold"),  
       local("HelveticaNeue-Bold"),  
       local("HelveticaNeue-Bold"),  
       url(fonts/MgOpenModernaBold.ttf);
       url(MgOpenModernaBold.ttf);
   font-weight: bold;
   font-weight: bold;
}
}
Line 77: Line 77:
</pre>
</pre>


The screenshot below shows the results on Mac OS X, Windows and Linux for a  
The screenshot below shows from top to bottom the results on Mac OS X, Windows and Linux for a simple testcase that uses the font family defined above:
simple testcase that uses the font defined above:


[[File:Macwinlinrendering.png|center|link=http://people.mozilla.org/~jdaggett/demos/localfallback.html|Use of local() for linking to local fonts]]
[[File:Macwinlinrendering.png|center|link=http://people.mozilla.org/~jdaggett/demos/localfallback.html| Use of local() for linking to local fonts]]


The name in the <code>local()</code> is the full name for an individual face.  Under Mac OS X, this appears in the FontBook information panel for a given face and there are similar tools under Linux.  On Windows, use the [http://www.microsoft.com/typography/FreeToolsOverview.mspx font properties extension], a free download from Microsoft.  With the extension installed, the properties panel shows information about an individual font.  The full name is referred to as the "Font Name" on the Name tab:
The Helvetica Neue font family is available on most Mac OS X systems but generally not on either Windows or Linux machines.  When the example here is rendered on Mac OS X, the local Helvetica Neue faces are used and no font is downloaded.  Under Windows and Linux the attempt to load a local face fails and a substitute font, MgOpen Moderna is downloaded and used instead.  MgOpen Moderna is intended to be a substitute for Helvetica, hence it renders similar to Helvetica Neue.  So an author can guarantee text appearance but avoid a font download when it's not necessary.
 
The name used to refer to a specific font face is the full name for an individual font.  Generally it's the family name plus the style name (e.g. "Helvetica Bold").  Under Mac OS X, the name is listed in the information panel for a given face.  Select a single face and choose 'Show Font Info' from the Preview menu in FontBook.  Similar tools exist under Linux.  On Windows, use the [http://www.microsoft.com/typography/FreeToolsOverview.mspx font properties extension], a free download from Microsoft to view these names.  With the extension installed, the properties panel shows information about an individual font.  The full name is referred to as the "Font Name" on the Name tab:


[[File:Fontproperties.png|center|link=http://www.microsoft.com/typography/FreeToolsOverview.mspx| Font properties with Microsoft Font Extension installed]]
[[File:Fontproperties.png|center|link=http://www.microsoft.com/typography/FreeToolsOverview.mspx| Font properties with Microsoft Font Extension installed]]


In this case the Helvetica Neue font is present on Mac OS X systems but generally not on Windows or Linux machines.
Safari only supports PostScript name lookup under Mac OS X, so under Mac OS X Postscript names are also supported.  For OpenType PS fonts, often labeled with an .otf extension, the full name is the same as the PostScript name under Windows.  So for .otf fonts, authors are advised to include both the full name and the PostScript name for cross-platform interoperability.


- complications of names across platforms
== Supporting Many Languages ==


- either a TrueType or an OpenType font
Many languages suffer from a lack of commonly available fonts.  For minority languages and ancient scripts, the options often dwindle to just a handful.  The use of @font-face allows authors using these languages to ameliorate this by including fonts with their pages.
 
- kerning/ligatures control
 
- big win for undersupported scripts
 
- working with IE


<pre>
/* arabic example */
</pre>


== Stylistic choices ==
== Stylistic choices ==


== Many Different Languages ==
- font types available


<pre>
- don't go crazy, simple is often best
/* greek example */
</pre>


<pre>
- kerning/ligatures control
/* arabic example *
</pre>
 
<pre>
/* linear b */
</pre>


== Font licensing issues ==
== Font licensing issues ==


== Font Linking In Internet Explorer ==
== Font Linking In Internet Explorer ==


== Further resources ==
== Further resources ==
Line 126: Line 114:
* [https://developer.mozilla.org/en/CSS/@font-face MDC @font-face documentation]
* [https://developer.mozilla.org/en/CSS/@font-face MDC @font-face documentation]
* [http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html CSS2 Fonts specification]
* [http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html CSS2 Fonts specification]
* [http://dev.w3.org/csswg/css3-fonts/ CSS3 Fonts Editor's Draft]
* [http://dev.w3.org/csswg/css3-fonts/ CSS3 Fonts draft]
* [http://www.w3.org/TR/access-control/ Access Control Working Draft]
* [http://www.w3.org/TR/access-control/ Access Control Working Draft]


Jdaggett
241

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/148124"