Maison > Article > interface Web > Comment définir la taille de la police en CSS
Comment définir la taille de la police en CSS
- 青灯夜游original
- 2021-01-27 18:17:44126832parcourir
En CSS, vous pouvez définir la taille de la police via l'attribut font-size, et le format de syntaxe est "font-size: value;". La valeur de cet attribut peut être des mots-clés tels que "small", "large", "smaller", "larger", etc. ; il peut également s'agir d'une valeur numérique en unités px, em, rem ou %.
L'environnement d'exploitation de cet article : Acer S40-51, CSS3&&HTML5&&HBuilder
En CSS, vous pouvez utiliser l'attribut font-size pour ajuster la taille de la police ; est utilisé pour définir la taille de la police. Si un élément ne définit pas explicitement l'attribut font-size, il héritera automatiquement du résultat du calcul de l'attribut font-size de l'élément parent. Notez que l'attribut font-size définit en fait la hauteur des cases de caractères dans la police ; le glyphe de caractère réel peut être plus grand ou plus court que ces cases (généralement plus court).
Valeurs d'attribut pouvant être définies :
Exemple 1 : 
<!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>effet Image :
Exemple 2 :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* font-size属性设置字体大小--相对大小值 */
.larger {
font-size: larger;
/* 把 font-size 设置为比父元素更大的尺寸。 */
}
.smaller {
font-size: smaller;
/* 把 font-size 设置为比父元素更小的尺寸。 */
}
</style>
</head>
<body>
<p>这是测试段落</p>
<p class="larger">这是测试段落</p>
<p class="smaller">这是测试段落</p>
</body>
</html>Rendu :
Exemple 3 :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*font-size属性设置字体大小--绝对大小值*/
.xx-small {font-size: xx-small;}
.x-small {font-size: x-small;}
.small {font-size: small;}
.medium {font-size: medium;}
.large {font-size: large;}
.x-large {font-size: x-large;}
.xx-large {font-size: xx-large;}
</style>
</head>
<body>
<p>这是测试段落</p>
<p class="medium">这是测试段落</p>
<p class="xx-small">这是测试段落</p>
<p class="x-small">这是测试段落</p>
<p class="small">这是测试段落</p>
<p class="large">这是测试段落</p>
<p class="x-large">这是测试段落</p>
<p class="xx-large">这是测试段落</p>
</body>
</html>Rendu :
Pour plus de connaissances liées à la programmation, veuillez visiter :Introduction à la programmation
! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!