nicht angemeldet
Hallo,
das Folgende ist zwar eine quick&dirty Lösung, aber selbst erklärend, so dass du das nutzen kannst oder besser noch, daraus eine individuelle Lösung ableiten kannst. Test mal mit damit ....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Font cheange in Head</title>
<style>
</style>
</head>
<body>
<!-- Bsp. manuell -->
<script>
function addfont(){
if (document.getElementById('addstyle') ){
return alert('existiert schon');
}
var x = '<style id="addstyle">@font-face{font-family:e5;local: e5;src:url("e5.ttf");}</style>';
document.getElementsByTagName('head')[0].innerHTML = document.getElementsByTagName('head')[0].innerHTML +x;
}
</script>
<!-- Bsp. automatisch -->
<script>
onload=function addfont_auto(){
var x = '<style id="addstyle">@font-face{font-family:e5;local: e5;src:url("e5.ttf");}</style>';
document.getElementsByTagName('head')[0].innerHTML = document.getElementsByTagName('head')[0].innerHTML + x;
document.getElementById('autochange').style.fontFamily='e5';
}
</script>
<button onclick="addfont();">Schriftwechsel manuell</button>
<button onclick="document.getElementById('addstyle').outerHTML='';">Schriftwechsel rückgängig</button>
<button onclick="alert(document.getElementsByTagName('html')[0].outerHTML);">showsource</button>
<h1 style="font-family: e5;">Änderung auf Knopfdruck</h1>
<p>.....paragraph.</p>
<p>....... another paragraph.</p>
<div id="autochange">
<h2>Oder Schriftwechsel automatisch</h2>
<p>dann z.B. style vordeklarieren und zb. mit ID ansprechen</p>
</div>
</body></html>
*Die Fontdatei(hier e5.ttf) ersetzen durch eigene.
*Hätte es gern als Onlinebeispiel gepostet aber scheint bei den Anbietern nicht zu gehen, kein Zugriff auf Headbereich.
Gruss Henry
Matthias Apsel
Gunnar Bittersmann