• 技术文章 >web前端 >css教程

    css中如何改变字体大小

    青灯夜游青灯夜游2021-02-22 15:01:38原创93

    在css中,可以使用font-size属性来改变字体大小,该属性可以设置字体大小,语法格式为“font-size:值;”。实际上font-size属性设置的是字体中字符框的高度,实际的字符字形可能比这些框高或矮(通常会矮)。

    本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    在css中,可以使用font-size属性来改变字体大小。

    css font-size属性

    font-size 属性用于设置字体大小。

    注意:实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。

    描述
    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large

    把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。

    默认值:medium。

    smaller把 font-size 设置为比父元素更小的尺寸。
    larger把 font-size 设置为比父元素更大的尺寸。
    length把 font-size 设置为一个固定的值。
    %把 font-size 设置为基于父元素的一个百分比值。
    inherit规定应该从父元素继承字体尺寸。

    【推荐教程:CSS视频教程 、《html视频教程》】

    /* <absolute-size>,绝对大小值 */
    font-size: xx-small;
    font-size: x-small;
    font-size: small;
    font-size: medium;
    font-size: large;
    font-size: x-large;
    font-size: xx-large; 
    /* <relative-size>,相对大小值 */
    font-size: larger;
    font-size: smaller; 
    /* <length>,长度值 */
    font-size: 12px;
    font-size: 0.8em; 
    /* <percentage>,百分比值 */
    font-size: 80%;
     
    font-size: inherit;

    实例:使用font-size属性+长度值设置字体大小

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			/* font-size属性设置字体大小--“数字+长度值”
    			*/
    			.length1 {
    				font-size: 20px;
    				/* 
    				px,像素,它是 CSS 中最常用的长度单位,可以用来指定字体大小,元素的宽度、高度、边框、内边距,外边距的大小等等, 
    				它是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI
    				
    				px 单位的值必须是整数值
    				 */
    			}
    		
    			.length2 {
    				font-size: 2em;
    				/* em
    				相对长度单位,取决于目标元素字体尺寸。
    				em 单位的值等于基本元素或父元素的字体大小。
    			    */
    			}
    			
    			.length3 {
    				font-size: 2rem;
    				/* rem
    				CSS3中加入的 相对长度单位,
    				取决于文档根元素(通常为:root)的字体尺寸,适用于依据字体尺寸进行的排版,适用于自适应。 */
    			}
    			.length4{
    				font-size:200%;
    				/* 相对于父元素的尺寸的取值,
    				实际使用中,如果父元素是一个非稳定的取值,可能会导致父元素被撑开,
    				而实际值取决于其祖先元素中最近的一个拥有稳定取值的元素。整数取值,并不适用于解决自适应问题。 */
    			}
    		</style>
    	</head>
    	<body>
    		<p>这是测试段落</p>
    		<p class="length1">这是测试段落</p>
    		<p class="length2">这是测试段落</p>
    		<p class="length3">这是测试段落</p>
    		<p class="length4">这是测试段落</p>
    	</body>
    </html>

    效果图:

    1.png

    更多编程相关知识,请访问:编程视频!!

    以上就是css中如何改变字体大小的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css 字体大小
    上一篇:CSS实现滚动阴影效果的小技巧(分享) 下一篇:CSS外部样式表有两种引用方法,分别是什么
    第15期线上培训班

    相关文章推荐

    • CSS Modules是啥子东西?一起来了解一下!• 详细了解CSS3中的border-image-slice属性• 浅谈CSS3 Grid网格布局(display: grid)的用法• 浅谈css布局中负margin的使用方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网