Embeddig af skrifttyper med CSS – også i IE

juni 17th, 2010

Standardskrifttyper er kedelige (og alle bruger dem, sjovt nok) – derfor er det rart at finde skrifttyper som passer til den grafiske stil man prøver at ramme/opfinde, og rent faktisk at kunne bruge disse fantastiske skrifttyper. Det kan nu endelig lade sig gøre (også uden Flash) i alle de største browsere (Firefox, Safari, Chrome og sågar Internet Explorer 7 og opefter) med følgende lille stump kode: 

@font-face

Her på siden bruger jeg tre skrifttype: Roadway til overskrifter, Georgia til brødtekst og Primer Apples til de lidt mere specielle ting. Eftersom Georgia findes på næsten alle computere, er der ingen grund til at embedde den. De to andre derimod, går jeg ikke ud fra at overvældende mange mennesker har, så dem har jeg embedden.

Under normale omstændigheder ville man embedde dem med følgende kode:

@font-face {
	font-family: Roadway;
	src: local(Roadway), url('fonts/ROADWAY_.ttf') format('opentype');
}

Ovenstående kode virker i alle browsere, og skal ikke bruge andet end en skrifttype i en mappe. Herefter er det muligt at bruge skrifttypen overalt man lyster ved hjælp af

font-family: Roadway;

Desværre findes Internet Explorer, og hos Microsoft gider man ikke gøre som alle de andre, så der skal man have skrifttypen i et andet format – yæi!

Dog er det ret nemt at gøre noget ved, for der findes en ret stor bunke gratis convertere – blandt andet http://ttf2eot.sebastiankippe.com/

Efter den lille konvertering skal ens CSS rettes lidt til, så den ser sådan ud:

@font-face {
	font-family: Roadway;
	src: url('fonts/ROADWAY_.eot');
	src: local(Roadway), url('fonts/ROADWAY_.ttf') format('opentype');
}

..oog så virker det helt fantastisk godt fra IE7 og helt op til rigtige browsere :)

Update

IE9 er helt pjattet med sikkerhed (nu også omkring skrifttyper :S) så oplever man at IE9 driller, bør man lege med sine Apache-indstillinger.

Skrevet i CSS, IE7 bugs, Webudvikling | 3 kommentarer »

IE7 + Google Closure + class = argh!!

juni 17th, 2010

Eftersom jeg sikkert ikke er den eneste der er blevet gammel før tid af at arbejde med Internet Explorer 7 og Google Closure, kommer her en lille opdagelse: Prøver man med nedenstående script at ændre class på et link, sker der intet!

function viewSchedule() {
	$('testTables').style.display = 'none';
	$('testScheduleWrapper').style.display = 'block';
	goog.dom.classes.remove($('tableButton'), 'selected');
	goog.dom.classes.add($('scheduleButton'), 'selected');
}

Det ved man jo heldigvis at kun kan skyldes at IE er en skodbrowser. Det bliver lidt bedre når man klikker et andet sted på siden – så får elementet nemlig sin class. Når man er færdig med at undre sig over det, prøver man at tilføje følgende linie, og indser at alt lige pludselig virker:

<pre>$('scheduleButton').blur();

En hyggelig lille fejl i IE7, som andre forhåbentligt slipper for at kæmpe alt for længe med…

Skrevet i Google Closure, IE7 bugs | Ingen kommentarer »

Hej hej :)

Du er på vej til