SCRIPT Font switch


Webdesign | 4-04-2014 | Pascal Merks | Reacties


Ik heb dyslectie (maar ik denkt dat jullie dat wel door hadden). Voor mensen met dyslectie is er een speciaal font ontwikkeld dat het lezen van teksten makkelijker moet maken http://opendyslexic.org/. Omdat het font aan de onderkant "zwaarder" is is het voor mensen met dyslectie beter te lezen en draai je niet zomaar meer letters om of leest andere worden dan dat er staat. Daarom dacht ik laat ik een script maken waar je met 1 klik het font kan veranderen naar het dyslectie font. Zo dat de tekst (hopelijk) beter te lezen is voor mensen met dyslectie.

Demo link: http://pmkmedia.nl/uploads/demos/font-switch/index.html

 

Wat moet je doen:

Download dit zip bestand: http://pmkmedia.nl/uploads/demos/font-switch/css-dyslectie-font.zip

Upload de inhoud van map in het zip bestaant ergens op je server. Hier staat een css bestand in en het dyslectie font.

 

Laat de CSS voor het dyslectie vond in door deze regel toe te voegen voor de </head> tag:

Code:

<link rel="stylesheet" href="http://www.jouwebsite.nl/locatie/font/stylesheet.css" type="text/css"/>

 

Voeg deze code toe in de head van je website voor </head>:

Code:

<script type="text/javascript">
function changeFontFamily(fontFam) {
document.getElementById("font-switch").style.fontFamily = fontFam;
}
</script>

 

Geef de body tag de id "font-switch" mee:

Code:

<body id="font-switch">

 

Voeg deze button code nu toe op de pagina waar je wilt switchen van font:

<input type="button" value="Normaal" onClick="changeFontFamily('Arial, Helvetica, sans-serif')"/>
<input type="button" value="Dyslectie" onClick="changeFontFamily('Open Dyslexic Regular')"/>

 

Nu moet je 2 knoppen zien op de pagina waar je van font wilt wisselen. Als je op de Dyslectie knop klikt zal het font veranderen nar het Dyslectie font. Als je op normaal klikt zal de pagina weer resete naar het normale font.

 

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets