标签：网页字体

JavaScript利用Cookie保存所设置网页的字体大小

最近日本地震灾害比较严重，有些朋友可能会关注日本的网络媒体多一些，大家发现日本的网站很多都有字体大小的设置，分为“大”、“中”、“小”3个等级，这个对于视力不佳者可谓福音，也免去了调整浏览器字体大小之苦，但是如何让网站记住用户设置的字体大小呢，这时我们就需要本地存储了，在这里我们就用到前一篇文章《JavaScript本地存储(1) : 使用Cookie》讲解的Cookie类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<html>
<head>
<style type="text/css">
body {
  font-size:75%;
}
p {
  font-size:1.2em;
}
.fontset a{
  font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript">
// 这里放《JavaScript本地存储(1) : 使用Cookie》的Cookie类代码
 
var myCookie = new Cookie();
 
function loadFontSize() {
  document.body.style.fontSize=(myCookie.getItem("fontsize"));
}
 
function setFontSize(value) {
  myCookie.setItem("fontsize", value);
  loadFontSize();
}
 
window.onload = function(){
  loadFontSize();
}
</script>
<div class="fontset">
<a href="javascript:setFontSize('120%')">大</a>
<a href="javascript:setFontSize('100%')">中</a>
<a href="javascript:setFontSize('75%')">小</a>
</div>
<p>我是内容</p>
</body>
</html>

大家可以看到，设置字体的办法是通过设置style的fontSize属性，当然这里我们通过CSS将body的字体默认为75%这样的百分比大小，然后通过设置内容的font-size字体大小为指定em为单位的数值大小就可以了，然后我们可以通过调整body的font-size的百分比来控制整体字体大小，当然对于字体固定为px像素大小的只能调整相应的像素值了，因为百分比对像素值的字体大小不起作用，这也就是为什么有些网站无法通过浏览器上的调整字体大小来调整的原因，当然这个像素大小字体的作用可以用来固定我们的“大”、“中”、“小”三个链接的字体大小，避免它们也随着整体百分比的改变而字体变化。