让用户自己控制网页字体的大小的css书写方法

2024-11-27 01:08:09

现在国内绝大多数的站点都用CSS把字体大小设定为12px，像素虽然也是相对尺寸单位，但只是相对于屏幕的分辨率，当屏幕的分辨率一定时，如果你感到字太小，阅读有困难，在非标准浏览器中就无能为力了，所以说，如果把单位改成em，那么就可以用CTRL+鼠标滚动把字放大，或者用菜单上的查看>文字大小来改变字的大小。

如何设定

1.在body标签里将字体尺寸设为62.5%，如果在body里没有CSS设定，那么浏览器默认的大小是16px，设了62.5%，则字体尺寸=16px*62.5%=10px，这时你能用em方便地设大小了，比如你需要用12px，只要设1.2em。

body{
font-size: 62.5%;
}

h1{
fong-size: 1.4em;/* h1字的大小相当于14px */
}
2.body里字体尺寸设为75%，则字体尺寸=16px*75%=12px，1em相当于12px.

body{
font-size: 75%;
}

h1{
fong-size: 1.5em;/* h1字的大小相当于18px */
}

第一种方法更好些。

如果是英文网站的话，还可以设定为small、x-small......

当然这样一来，对页面的设计要求会高一些。

让用户自己控制网页字体的大小的css书写方法

现在国内绝大多数的站点都用CSS把字体大小设定为12px,像素虽然也是相对尺寸单位,但只是相对于屏幕的分辨率 ,当屏幕的分辨率一定时,如果你感到字太小,阅读有困难,在非标准浏览器中就无能为力了,所以说,如果把单位改成em,那么就可以用CTRL+鼠标滚动把字放大,或者用菜单上的查看>文字大小来改变字的大小. 如何设定 1.在body标签里将字体尺寸设为62.5%,如果在body里没有CSS设定,那么浏览器默认的大小是16px,设了62.5%,则字体尺寸=16px*62.5%=10px,这时你能用e
JavaScript控制网页层收起和展开效果的方法

本文实例讲述了JavaScript控制网页层收起和展开效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content=&q
教你如何用CSS来控制网页字体的显示样式

HTML对于内容卷标只有: 这3种设定,而关于CSS对于内容的延伸规格让我们可以对字型的有更详细的设定.对于字型的设定: font-family:字型名称1,字型名称3,字型名称3等等.显示字型的优先级,若计算机中有安装该字型,便以该字型显示.如果你所设定的字型,client的计算
js简单实现调整网页字体大小的方法

本文实例讲述了js简单实现调整网页字体大小的方法.分享给大家供大家参考,具体如下: //var tgs = new Array('div','td','tr'); var tgs = new Array('td','tr'); //Specify spectrum of different font sizes: //var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)

复制代码代码如下: /* 对页面上的字体增大.缩小.恢复原始大小需要在html页面中定义三个元素元素的class分别为 resetFont.increaseFont.decreaseFont 在本文件的JQuery事件中分别定义了三个元素的click事件来实现增大.缩小.恢复原始大小 */ $(function () { //取得字体大小,在html标记下定义了font-size var originalFontSize = $("html").css("font-si
jquery实现实时改变网页字体大小、字体背景色和颜色的方法

本文实例讲述了jquery实现实时改变网页字体大小.字体背景色和颜色的方法.分享给大家供大家参考.具体如下: 这里使用jquery实时改变字体大小.字体背景色和颜色,JQUERY让很多事变得更简单,确实是个实用的小插件,对JQ不熟悉的朋友,平时可要多看一些实例啦,比如现在这一个小实例,你可以从中学习到不少知识点的哦. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
微信公众号实现扫码获取微信用户信息（网页授权）

刚开始接触微信的时候一头雾水,领导想要一个扫码获取微信用户信息的功能,而且是扫的别人的二维码,我是一阵忙活啊. 经过努力和尝试,终于功夫不负有心人啊,赶紧记录一下,我用的是thinkphp编写的. 第一步:就是二维码的生成 1.首先要确定第一个二维码,因为既然是扫码,肯定是要第一个二维码的,也就是第一人才可以.我将第一个二维码的唯一值(id)设置成零,然后开始我的编写 2.既然是二维码,我用了phpqrcode二维码生成插件,二维码的生成可以在本地编写,查看效果后再上传服务器. (1)从网上下
js控制网页背景音乐播放与停止的方法

本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
iOS设置UIButton文字显示位置和字体大小、颜色的方法

前言大家都知道UIButton按钮是IOS开发中最常用的控件,作为IOS基础学习教程知识 ,初学者需要了解其基本定义和常用设置,以便在开发在熟练运用. 一.iOS设置UIButton的字体大小 btn.frame = CGRectMake(x, y, width, height); [btn setTitle: @"search" forState: UIControlStateNormal]; //设置按钮上的自体的大小 //[btn setFont: [UIFont system
JavaScript控制网页平滑滚动到指定元素位置的方法

本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法.分享给大家供大家参考.具体如下: function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while (obj = obj.offsetParent) { curleft += obj.offsetLeft; cu

让用户自己控制网页字体的大小的css书写方法

相关推荐

随机推荐