<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Kaizou &#187; CSS</title>
	<atom:link href="http://www.kaizou.org/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.kaizou.org</link>
	<description>This is Web 2.71828</description>
	<lastBuildDate>Sun, 16 May 2010 21:17:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>CSS 3 Web Fonts</title>
		<link>http://www.kaizou.org/2009/06/css-3-web-fonts/</link>
		<comments>http://www.kaizou.org/2009/06/css-3-web-fonts/#comments</comments>
		<pubDate>Sun, 21 Jun 2009 15:23:14 +0000</pubDate>
		<dc:creator>David Corvoysier</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css 3]]></category>

		<guid isPermaLink="false">http://www.kaizou.org/?p=412</guid>
		<description><![CDATA[Among other cool things, CSS 3.0 finally introduces an old feature that had only been implemented so far using proprietary extensions, and therefore did not receive the attention it deserved: Web Fonts ! As specified in the CSS Fonts Module Level 3 specifications, web developers can insert @font-face CSS rules into their stylesheets to specify [...]]]></description>
			<content:encoded><![CDATA[<p>Among other cool things, CSS 3.0 finally introduces an old feature that had only been implemented so far using proprietary extensions, and therefore did not receive the attention it deserved: Web Fonts !
</p>
<p>
As specified in the <a href="http://www.w3.org/TR/css3-webfonts/">CSS Fonts Module Level 3 specifications</a>, web developers can insert @font-face CSS rules into their stylesheets to specify explicitly the location of the font resource corresponding to a font face specified in that stylesheet, thus allowing a consistent rendering of their site.
</p>
<p>
For instance, I use the &#8220;Soviet&#8221; font family for the title of this blog, but this font is not so common, so I inserted the following code in the site main stylesheet:
</p>
<pre>
<code>@font-face {
  font-family: "Soviet";
  src: url("./fonts/Soviet2.ttf") format("truetype");
}</code>
</pre>
<p>
And in the CSS rule corresponding to the site title:
</p>
<pre>
<code>#header h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: 56px <span style="font-weight:bold">'Soviet'</span>, 'Trebuchet MS', Sans-serif;
	letter-spacing: -3px;
	text-decoration: none;
	color: #000;
	top: 58px; left: 300px;
}</code>
</pre>
<p>
This causes compatible web browsers to download the Soviet Font from my site and correctly display the site title.
</p>
<p>
Of course, not many web browsers today support Web Fonts (according to my tests, only <a href="http://nightly.webkit.org/">WebKit nightlies</a> have the correct display), but things will change shortly, as Firefox 3.5 should support them.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kaizou.org/2009/06/css-3-web-fonts/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
