1818IP-服务器技术教程,云服务器评测推荐,服务器系统排错处理,环境搭建,攻击防护等

当前位置:首页 - 网站技术 - html/css - 正文

君子好学,自强不息!


每日笔记,用css设置文字大小,网站文字大小。

字体大小

font-size 属性设置文本的大小。


在网页设计中,能够管理文本大小很重要。但是,不应使用调整字体大小来使段落看起来像标题,或是使标题看起来像段落。


请始终使用正确的 HTML 标签,例如 <h1> - <h6> 用于标题,而 <p> 仅用于段落。


font-size 值可以是绝对或相对大小。


绝对尺寸:


将文本设置为指定大小

不允许用户在所有浏览器中更改文本大小(可访问性不佳)

当输出的物理尺寸已知时,绝对尺寸很有用

相对尺寸:


设置相对于周围元素的大小

允许用户在浏览器中更改文本大小

注释:如果您没有指定字体大小,则普通文本(如段落)的默认大小为 16px(16px = 1em)。

以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小:


实例

p1 {
  font-size: 40px;
}

p2 {
  font-size: 30px;
}

p3 {
  font-size: 20px;
}


40号字体

30号字体

20号字体

提示:如果您使用了像素,则仍然可以使用缩放工具来调整整个页面的大小。

用 em 设置字体大小

为了允许用户调整文本大小(在浏览器菜单中),许多开发人员使用 em 而不是像素。

建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此,默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小:pixels/16=em。

实例

p1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

p2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p3 {
  font-size: 1.25em; /* 20px/16=1.25em */
}

40号字体

30号字体

20号字体

在上例中,em 单位的文本大小与上一个例子中的像素大小相同。但是,若使用 em 尺寸,则可以在所有浏览器中调整文本大小。

不幸的是,旧版本的 Internet Explorer 仍然存在问题。放大文本时它比应该大的尺寸更大,缩小文本时会更小。、

使用百分比和 Em 的组合

实例

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 1.25em;
}


100%号字体这里是14px,0.875em

40号字体

30号字体

20号字体

响应式字体大小

可以使用 vw 单位设置文本大小,它的意思是“视口宽度”("viewport width")。

这样,文本大小将遵循浏览器窗口的大小,请调整浏览器窗口的大小,以查看字体大小如何缩放:

实例

<h1 style="font-size:10vw">Hello World</h1>

响应式文本

请调整浏览器窗口的大小,以查看文本大小如何缩放。

调整文本大小时,请使用 "vw" 单位。 10vw 将尺寸设置为视口宽度的 10%。

视口是浏览器窗口的大小。 1vw = 视口宽度的 1%。如果视口为 50 厘米宽,则 1vw 为 0.5 厘米。


本文来源:1818IP

本文地址:https://www.1818ip.com/post/349.html

免责声明:本文由用户上传,如有侵权请联系删除!

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。