font字体的样式设置

日期: 栏目:常识 浏览:5

2022年4月14日19:45分

在学习HTML中看了一眼自己的博客,发现自己又变得十分颓废,整理一下这个学期学的内容

1、字体font标记

font-size:20px/50%/larger  设置字号

font-family:'宋体'/‘黑体’   设置字体(多个字体可以用','进行分割,从第一个字体开始找,如果找不到就使用默认字体,要注意如果字体名出现了空格要用""来括起来)

font-style:italic/oblique/inherit/100/200/900(9个层次,数字越小字体越细)  设置字体风格(斜体,italic是用该字体下的斜体来显示,oblique可以让该字体变成斜体显示)

font-weight:lighter/bold/border  设置字体加粗(在HTML中使用的是 标签来设置)

font-variant:small-caps  设置小型大写字体(将小写字母转为大写字母,并将转换后的字母字号缩小)

line-height:0.5/1/2/20px/20%(%是在原本的基础上)  设置字体行间距

.size{ font-size: 50px;}.size\%{ font-size: 150%;}.family{ font-family: '宋体';}.family1{ font-family: '黑体';}.weight{ font-weight: lighter;}.weight1{ font-weight: bold;}.weight2{ font-weight: border;}.variant{ font-variant: small-caps;}.style{ font-style: italic;}.style1{ font-style: oblique;}.style2{ font-style:inherit;}.height{ line-height: 20px;}
DOCTYPE html><html><head> <title>CSS样式属性title> <link rel="stylesheet" type="text/css" href="./web02css/web3.css">head><body> <div class="size">设置字号50pxdiv><br> <div class="size%">设置字号150%div><br> <div class="family">设置字体宋体div><br> <div class="family1">设置字体黑体div><br> <div class="weight">字体样式(粗细) lighterdiv><br> <div class="weight1">字体样式(粗细) bolddiv><br> <div class="weight2">字体样式(粗细) borderdiv><br> <div class="style">字体风格 italicdiv> <div class="style1">字体风格 obliquediv> <div class="style2">字体风格 inherit(从父类继承的)div><br> <p>AAAAAAAAAp> <div class="height">行间距20pxdiv> <p>BBBBBBBBBBp> <div class="variant">设置小型大写字体(就是将小写的字母变为大写并且将原本的大写字号变小)例如:<br>原本大写LLLL 小型大写字体llllllllllllldiv><br>body>html>

 

 

本文地址:https://caijingdemo.com/changshi/78884.html

标签: