/*

对页面上的字体增大、缩小、恢复原始大小

需要在html页面中定义三个元素

元素的class分别为 resetFont、increaseFont、decreaseFont

在本文件的JQuery事件中分别定义了三个元素的click事件来实现增大、缩小、恢复原始大小

*/

$(function () {

//取得字体大小,在html标记下定义了font-size

var originalFontSize = $("html").css("font-size");

//恢复默认字体大小

$(".resetFont").click(function () {

$("html").css("font-size", originalFontSize);

//JavaScript不向下执行

return false;

});

//加大字体,某个元素的class定义为increaseFont

$(".increaseFont").click(function () {

//取得当前字体大小 后缀px,pt,pc

var currentFontSize = $("html").css("font-size");

//取得当前字体大小,parseFloat()转为float类型去除后缀

var currentFontSizeNumber = parseFloat(currentFontSize);

//新定义的字体大小

var newFontSize = currentFontSizeNumber * 1.1;

//重写样式表

$("html").css("font-size", newFontSize);

//JavaScript不向下执行

return false;

});

//减小字体,某个元素的class定义为decreaseFont

$(".decreaseFont").click(function () {

//取得当前字体大小 后缀px,pt,pc

var currentFontSize = $("html").css("font-size");

//取得当前字体大小,parseFloat()转为float类型去除后缀

var currentFontSizeNumber = parseFloat(currentFontSize);

//重新定义字体大小

var newFontSize = currentFontSizeNumber * 0.9;

//重写样式表

$("html").css("font-size", newFontSize);

//JavaScript不向下执行

return false;

});

});

实时改变网页字体大小,jQuery版

适时改变网页字体大小,引入了jQuery,并且对字体最大能放大的位数或最小能缩小的倍数加了限制,避免一些无意义的功能,当字体小到规定值时,再次点击缩小功能已经不起作用,这样做似乎更加人性化。

适时改变网页字体大小,jQuery版

放大

缩小

This is some text. This is some text. This is some text. This is some text. This

is some text. This is some text. This is some text. This is some text. This is some

text. This is some text. This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text. This is some text. This

is some text. This is some text.

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

html前端页面的字体大小,JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)...相关推荐

  1. php jq跳转页面跳转,使用jQuery做页面跳转

    这次给大家带来使用jQuery做页面跳转,使用jQuery做页面跳转的注意事项有哪些,下面就是实战案例,一起来看一下. 所以了,今天我们就来说一说如何在jQuery中跳转到另外一个网页HTML. 其实 ...

  2. html在电脑上转换字体怎么变了,电脑网页字体怎么变换大小

    电脑网页字体变大有时候会让人产生不舒服的感觉,有时候就想网页字体变换一下大小,下面是学习啦小编整理的电脑网页字体变换大小的方法,供您参考. 电脑网页字体变换大小的方法一 首先,建议如果是私人电脑的情况 ...

  3. html页面字体缩小模糊怎么解决,如何解决网页字体模糊的问题

    我们在使用浏览器查看网页,有的时候有的网页字体比较模糊,都看不清楚字了.出现网页字体模糊的时候,我们可以去设置一下字体大小,应该就可以了.那遇到网页字体模糊这样的问题,我们应该要怎么去解决它好呢?接下 ...

  4. 网页字体在Frontpage2000制作网页中的讲解

    运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力. ...

  5. css 谷歌字体加载,使用谷歌网页字体无限制的添加字体到您的网站

    很长一段时间,网站的开发受到影响,因为他们的资源,他们只能使用少数几种字体.但是,现在谷歌推出新的Web服务"谷歌网页字体".该服务允许您使用不同的字体在您的网站从谷歌的可能性.使 ...

  6. CSS 网页字体最佳实践

    一般在网页的字体设置中,可以将字体分类三类: 系统字体:使用系统自带的字体 兜底字体:当系统字体无法正常使用,而兜底的字体 Emoji 字体:显示网页中的表情字体 为了满足不同平台,以及 Emoji ...

  7. chrome扩展推荐 - 让你的网页字体更美 --- Advanced Font Settings

    首先要说的是我不喜欢雅黑,当然也不喜欢超过12px的宋体,从macbook回到win后一段时间很纠结各种字体,好在有个神器叫做 Advanced Font Settings,让我看网页更加舒心. Ad ...

  8. 安卓下设置系统字体大小影响H5页面布局

    问题描述: 调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉 问题分析: 因为用户调整了系统字体的大小,修改了根节点和body节点的font-siz ...

  9. 在做vue h5 时因改变手机字体导致页面布局错乱 比如在微信公众号中 放入h5 客户把手机字体或者微信字体调大 导致页面错乱

    认定了 就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油 骚年 ** 正文: ** 在做vue h5 时因改变手机字体导致页面布局错乱 比如在微信公众号中 放入h5 客户把手机字体或者微信字 ...

  10. [css] 当页面采用rem布局时,如何解决用户设置字体大小造成的页面布局错位?

    [css] 当页面采用rem布局时,如何解决用户设置字体大小造成的页面布局错位? 禁止用户缩放页面 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主 ...

最新文章

  1. 面试官如何判断面试者的机器学习水平?
  2. pip安装kolla-ansible时报错Cannot install ‘PyYAML‘的解决方法
  3. do-release-upgrade do not work
  4. C++ 通讯录设计(四)
  5. 自适应好看的引导单页源码-无后台
  6. js 判断剪切板内容是否为text_Python+selenium自动化之EC模块之text_to_be_present_in_element...
  7. 教你如何打开android4.3和4.4中隐藏的AppOps
  8. 为什么不能在lock语句的主体内使用#39;await#39;运算符?
  9. [Html]Jekyll 代码高亮的几种选择
  10. html静态网页制作制作表格,北邮HTML静态网页制作.docx
  11. 共享单车项目(一)--项目简介
  12. java对文件进行md5加密,对文件进行 MD5 加密
  13. 8421码的加减矫正
  14. Excel数据查重小技巧
  15. Go语言之高级篇beego框架之view
  16. 计算机网络通信中的交换方式有哪几种,数据通信方式有哪几种
  17. 【转】未能加载文件或程序集“XXX”或它的某一个依赖项。试图加载格式不正确的程序。...
  18. MySQL自带的性能压力测试工具mysqlslap详解
  19. mysql curdate前一天_mysql数据库中CURDATE()函数起什么作用呢?
  20. 【转】七大查找算法总结

热门文章

  1. Android Studio基础-Activity生命周期与多个Activity跳转
  2. 蓝桥杯训练系统 分解质因数
  3. Chrome书签删除恢复
  4. 网易云课堂整站源码 THINKPHP二开仿网易云课堂
  5. [4G5G专题-101]:部署 - LTE FDD与LTE TDD技术差异比较详解
  6. Unity 改变下载资源商店中资源默认路径的方法
  7. 计算机硬件连接子系统,网络综合布线七大子系统详细讲解
  8. 数据库系列(4):关系型数据库
  9. 马化腾的马氏建议:“小步快跑 快速迭代”
  10. AD 20 PCB 导入CAD图形错乱-问题笔记