css初步入门（六）

最新推荐文章于 2024-10-01 23:20:42 发布

技术创造美好生活

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量76

点赞数

分类专栏： css 文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_46277092/article/details/129218470

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章详细介绍了CSS中设置字体样式的属性，如font-family用于设定字体系列，font-size用于设定字体大小，并讨论了如何使用绝对和相对单位（如像素和em）以及百分比来适应不同浏览器和用户需求。同时提到了CSS的font-weight属性来控制字体粗细。

摘要由CSDN通过智能技术生成

字体样式在网页编写中也非常常见，常见的属性有字体样式、字体大小、字体粗细。

字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

设置字体大小像素

设置文字的大小与像素，让您完全控制文字大小：

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

使用百分比和EM组合

在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

一、尺寸单位

CSS 支持多种尺寸单位，包括：

px：像素，固定大小单位
em：相对于当前元素字体大小的单位
rem：相对于根元素（HTML）字体大小的单位
%：相对于父元素的百分比单位
vh：相对于视口高度的 1/100 单位
vw：相对于视口宽度的 1/100 单位
cm：厘米，实际尺寸单位
mm：毫米，实际尺寸单位
in：英寸，实际尺寸单位
pt：磅，字体尺寸单位
pc：pica，字体尺寸单位
您可以根据需要选择适当的单位来控制元素的大小和尺寸。不同的单位在不同的情况下适用性不同，因此需要根据需求选择合适的单位。

二、尺寸单位换算

以下是 CSS 中一些常见的尺寸单位换算：

1 in = 2.54 cm
1 cm = 10 mm
1 in = 72 pt
1 pc = 12 pt
1 cm = 28.346 pt
1 em = 当前字体大小（例如，如果字体大小为 16px，则 1em = 16px）
1 rem = 根字体大小（例如，如果根字体大小为 16px，则 1rem = 16px）
1 vh = 视口高度的 1/100
1 vw = 视口宽度的 1/100
请注意，不同的单位在不同的情况下适用性不同，因此需要根据需求选择合适的单位。此外，不同的浏览器可能对同一单位的实现不同，因此在开发过程中需要做好相应的兼容处理。

三、特定情况下的尺寸单位换算

1、cm 与 px 的换算

1 cm = 37.8 px（在 96 dpi 的屏幕上）

请注意，不同的屏幕密度（dpi）会导致不同的换算结果，因此通常建议使用 em 或 rem 单位来定义字体大小和元素大小，而不是使用实际尺寸单位（如 cm 或 in）。

2、in 与 px 的换算

1 in = 96 px（在 96 dpi 的屏幕上）

请注意，不同的屏幕密度（dpi）会导致不同的换算结果，因此通常建议使用 em 或 rem 单位来定义字体大小和元素大小，而不是使用实际尺寸单位（如 in 或 cm）。

CSS font-weight 属性

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

roperty	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。