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

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

最近日本地震灾害比较严重,有些朋友可能会关注日本的网络媒体多一些,大家发现日本的网站很多都有字体大小的设置,分为“大”、“中”、“小”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像素大小的只能调整相应的像素值了,因为百分比对像素值的字体大小不起作用,这也就是为什么有些网站无法通过浏览器上的调整字体大小来调整的原因,当然这个像素大小字体的作用可以用来固定我们的“大”、“中”、“小”三个链接的字体大小,避免它们也随着整体百分比的改变而字体变化。

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!
请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*