📄 scale_temp_font.htm
字号:
<html>
<head>
<title>WM_scaleFont()</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body { font-size: 40px}
.nine { font-size: 22.5%}
.twelve { font-size: 30%}
.fourteen { font-size: 35%}
.sixteen { font-size: 40%}
.eighteen { font-size: 45%}
.twentyFour { font-size: 60%}
.thirtySix { font-size: 90%}
.emClass { font-size: .6em}
.exClass { font-size: .6ex}
-->
</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) {
/*
WM_scaleFont()
Author: Taylor
Author Email: taylor@wired.com
Author URL: http://www.taylor.org/
Package URL: http://www.hotwired.com/webmonkey/
WM_scaleFont() scales the fonts on the page depending on
the width of the window. It's very useful for creating a
page that's designed to fit within a window without scrolling.
For the whole effect to work well, use relative units
(em, ex, %) for all your CSS positioning and for
image and DIV sizes.
Usage: Internet Explorer requires the body tag to be loaded
before you can determine the width, and Netscape needs to call
the function in the head to write out the style tag. So you
need to insert two calls: one in a script tag in the head,
after any style sheets, and the other in a script tag right
after the body.
*/
// This checks for the existence of the document objects and
// properties where we store the passed variables.
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;
}
}
// The actual screen width is gotten here.
if (document.all) {
var screenWidth = document.body.offsetWidth;
} else if (document.layers) {
var screenWidth = window.innerWidth;
}
// This one line is the core of the routine. It takes the
// targeted font size and divides it by the actual width
// times the targeted width.
var scaledFont = parseInt(document.WM.WM_scaleFont.targetBodyFontSize) * (screenWidth / document.WM.WM_scaleFont.screenTarget);
// Now this new font size is applied to the body.
// For IE, it changes the body's style declaration and
// sets things up such that on resize this function is
//called again. For Netscape, it writes out a style tag
// in the head, and then depends on WM_netscapeCssFix()
// to reload the page if it's been resized.
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">
<script language="javascript">
if (document.all){
WM_scaleFont(640, 40, 'px');
}
</script>
<p>The default size is set to 40px</p>
<p>at 640px wide:</p>
<p><span class="nine">9px is 22.5%<br>
</span> <span class="twelve">12px is 30%<br>
</span> <span class="fourteen">14px is 35%<br>
</span> <span class="sixteen">16px is 40%<br>
</span> <span class="eighteen">18px is 45%<br>
</span> <span class="twentyFour">24px is 60%<br>
</span> <span class="thirtySix">36px is 90%<br>
</span> <span class="emClass">if you understand em</span> <span class="exClass">and
ex they work as well</span></p>
<p class="fourteen"> </p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -