字体样式

1.font-family

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器</title>
    <style type="text/css">
        h1{font-family: "Times New Roman";}
        p {font-family: "微软雅黑","宋体","黑体";}
    </style>
<!-- font-family字体属性 定义元素内文字以什么字体来显示  可以是具体字体名也可以是字体集-->
<!-- 含空格字体名和中文,用英文引号(")包裹 -->
<!-- 多个字体用逗号隔开,会根据系统有的字体,从左到右进行选择 -->
<!-- 字体集 : -->
    
</head> 
<body>
    <h1> 设置字体样式</h1>
    <p>设置字体样式测试</p>

    <h2 style="font-family: '黑体';">直接设置样式</h2>
    <!-- 引号嵌套,外使用双引号,内部使用单引号 -->
</body>
</html>

2.font-size

定义元素内文字大小
使用方式 font-size:绝对单位|相对单位
不设置字体大小时,为浏览器默认字体大小。

绝对单位

不能随浏览器分辨率或父元素大小改变而改变


绝对单位.png
相对单位

随分辨率改变而改变
单位有:px em %

color

方式 写法 说明
具体颜色名称 h1{color:red} 使用具体颜色
rgb h1 {color:rgb(10%,10%,100%)} 数字:0~255 百分比0%~100%
16进制 h1{color:#008800} #号开头,0~F 不区分大小写,#008800和#080一致,会自动补充

font-weight字体加粗

html加粗:用<b></b>或者<strong></strong>
font-weight:normal,bold(加粗),bolder,lighter(细),100~900
默认值:normal
400等于normal,700等于bold

斜体 font-style

html斜体<em></em>或者<i></i>
font-style:normal ,italic(斜体),oblique(倾斜)

字体变形 font-variant 作用于英文

将小写字母转换为小型大写字母
font-variant:normal,small-caps
<p style="font-variant">Cascading Style Sheets<p/>
效果


小型大写字母.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容