Java教程

font字体的样式设置

本文主要是介绍font字体的样式设置，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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中使用的是<b></b> <strong></strong>标签来设置）

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">设置字号50px</div><br>
    <div class="size%">设置字号150%</div><br>
    <div class="family">设置字体宋体</div><br>
    <div class="family1">设置字体黑体</div><br>
    <div class="weight">字体样式(粗细) lighter</div><br>
    <div class="weight1">字体样式(粗细) bold</div><br>
    <div class="weight2">字体样式(粗细) border</div><br>
    <div class="style">字体风格    italic</div>
    <div class="style1">字体风格 oblique</div>
    <div class="style2">字体风格 inherit(从父类继承的)</div><br>
    <p>AAAAAAAAA</p>
    <div class="height">行间距20px</div>
    <p>BBBBBBBBBB</p>
    <div class="variant">设置小型大写字体（就是将小写的字母变为大写并且将原本的大写字号变小）例如：<br>原本大写LLLL    小型大写字体lllllllllllll</div><br>

</body>
</html>

 

 

这篇关于font字体的样式设置的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航