在JavaScript和HTML实现简单的字体缩放

很多互联网上的网站为用户提供一个选项，以增加页面的字体大小，为更好的阅读体验。虽然现在几乎所有的网页浏览器支持放大/输出功能，使用鼠标滚轮或其他快捷键，它有时是一个好主意，给用户的方式来增加/减少网页的字体大小。

 

让我们实现一个简单的缩放器的JavaScript将增加/减少在客户端的网页的字体大小，而无需重新加载页面从服务器代码。一个小的JavaScript片段将用于在客户端的网页的字体大小改变。

 

JavaScript代码

让我们看看下面的JavaScript代码。

var fontSize = 1;

function zoomIn() {

fontSize += 0.1;

document.body.style.fontSize = fontSize + "em";

}

function zoomOut() {

fontSize -= 0.1;

document.body.style.fontSize = fontSize + "em";

}

在上面的JavaScript代码，定义一个全局变量fontSize是值1。这个变量的值将被改变，每当用户尝试增加或减少字体大小。然后我们有两个功能zoomIn（）和zoomOut（）进行放大和缩小分别。网页的字体大小改变通过改变在document.body.style属性fontSize的。

 

从HTML中调用的

你可以把简单的图标，放大和缩小文本，并呼吁zoomIn（）和zoomOut（）的Click事件的方法。或者可以将按钮放大/缩小。