KoppiePeest

Willekeurige urls of gevonden fragmenten om te onthouden of terug te vinden

Webfonts example

Posted by JephapE op 6 mei 2010

Upload de *.ttf naar de goede lokatie (relatief pad t.o.v. de css).

<!doctype html>
<html>
	<head>
		<title>Web fonts</title>
		<style>
			@font-face { font-family: 'Bookman'; src: url('font/urw_bookman_l_demi_bold.ttf'); }
			@font-face { font-family: 'Bookman'; font-style: italic; src: url('font/urw_bookman_l_demi_bold_italic.ttf'); }

			@font-face { font-family: 'Palladio'; src: url('font/urw_palladio_l_roman.ttf'); }
			@font-face { font-family: 'Palladio'; font-style: italic; src: url('font/urw_palladio_l_italic.ttf'); }

			body, p, div  {
				font-family: 'Palladio', monospace;
			}
			h1, h2, h3 {
				font-family: 'Bookman', monospace;
			}
		</style>

	</head>
	<body>

		<h1>Hoofdstuk 3 <em>(drie)</em> titel in Bookman</h1>

		<p>De tekst van het <em>derde hoofdstuk</em> en wat tekst er omheen in het Palladio lettertype. </p>

		<blockquote>Wat niet wordt herkend, valt terug op een <tt>monospace</tt> font.</blockquote>

	</body>
</html>

Screenshots (helaas met wat jpg-korrels).

Opera 10.54-snapshot doet het bij mij het mooist:

Andere browsers wisselen, Iceweasel(Firefox)3.0.x doet het maar half, Konqueror doet er helemaal niks mee. Chrome doet het wel, maar daar heb je een vergrootglas voor nodig. Opera 10.10 doet het ook, maar de antialiasing is wat minder.

Advertenties

2 Reacties to “Webfonts example”

  1. jephape said

    Veel fonts zijn te vinden op http://www.azfonts.net .

  2. jephape said

    o ja, de site/pagina dat deze interesse triggerde, was http://diveintohtml5.org/forms.html

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s

 
%d bloggers liken dit: