|
|
| CSS Skalierbare Font-Größe |
Beispiel: Sample
Seite öffnen (versucht mal die Größe des Browserfensters
zu verändern und beobachtet die Schrift in der Seite)
Der Quelltext der Sample Seite:
(Author und Idee: www.webmonkey.com)
<html>
<head>
<title>css_Scale-Font()</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body { font-size: 40px; font-family: "Trebuchet MS", Arial, Helvetica}
.nine { font-size: 22.5%; font-family: "Trebuchet MS", Arial, Helvetica}
.size12px { font-size: 30%; font-family: "Trebuchet MS", Arial, Helvetica}
.size14px { font-size: 35%; font-family: "Trebuchet MS", Arial, Helvetica}
.size16px { font-size: 40%; font-family: "Trebuchet MS", Arial, Helvetica}
.size18px { font-size: 45%; font-family: "Trebuchet MS", Arial, Helvetica}
.size24px { font-size: 60%; font-family: "Trebuchet MS", Arial, Helvetica}
.size36px { font-size: 90%; font-family: "Trebuchet MS", Arial, Helvetica}
-->
</style>
<script language="javascript">
function WM_netscapeCssFix() {
if (document.WM_initWindowWidth != window.innerWidth || document.WM_initWindowHeight
!= window.innerHeight) {
document.location = document.location;
}
}
function WM_netscapeCssFixCheckIn() {
if ((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion)
== 4)) {
document.WM_initWindowWidth = window.innerWidth;
document.WM_initWindowHeight = window.innerHeight;
window.onresize = WM_netscapeCssFix;
}
}
WM_netscapeCssFixCheckIn()
function WM_scaleFont(targetSize, initialFontSize, fontUnit) {
if (typeof document.WM == 'undefined'){
document.WM = new Object;
if (typeof document.WM.WM_scaleFont == 'undefined') {
document.WM.WM_scaleFont = new Object;
document.WM.WM_scaleFont.screenTarget = targetSize;
document.WM.WM_scaleFont.targetBodyFontSize = initialFontSize;
document.WM.WM_scaleFont.fontUnit = fontUnit;
}
}
if (document.all) {
var screenWidth = document.body.offsetWidth;
} else if (document.layers) {
var screenWidth = window.innerWidth;
}
var scaledFont = parseInt(document.WM.WM_scaleFont.targetBodyFontSize) * (screenWidth
/ document.WM.WM_scaleFont.screenTarget);
if (document.all) {
document.body.style.fontSize = scaledFont + document.WM.WM_scaleFont.fontUnit;
window.onresize = WM_scaleFont;
} else if(document.layers) {
var netscapeScaleReturn = '<style type="text/css">\nBODY {font-size:
' + scaledFont + document.WM.WM_scaleFont.fontUnit + '}\n</style>';
document.writeln(netscapeScaleReturn);
}
}
if (document.layers){
WM_scaleFont(640, 40, 'px');
}
</script>
</head>
<body bgcolor="#FFFFFF">
<p>Die default Schriftgröße ist 40px</p>
<p>im Verhältniss zu einer 640px breite:</p>
<p><span class="nine">9px is 22.5%<br>
</span> <span class="size12px">12px is 30%<br>
</span> <span class="size14px">14px is 35%<br>
</span> <span class="size16px">16px is 40%<br>
</span> <span class="size18px">18px is 45%</span><span
class="size12px"><br>
</span> <span class="size24px">24px is 60%<br>
</span> <span class="size36px">36px is 90%<br>
</span> </p>
<script language="javascript">
if (document.all){
WM_scaleFont(640, 40, 'px');
}
</script>
</body>
</html>
© 2001 by g¿smo