css中的字体单位

原创 于 2024-12-11 15:23:07 发布 · 465 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html5

绝对长度单位

这些单位表示固定的物理尺寸，不会根据其他因素变化。

  • cm：厘米
  • mm：毫米
  • in：英寸（1in = 96px = 2.54cm）
  • px：像素（最常用的绝对单位，在屏幕上的表现取决于设备的分辨率）
  • pt：点（1pt = 1/72 of an inch）
  • pc：派卡（1pc = 12 pt）

相对长度单位

这些单位相对于某个元素或父元素的属性值，因此它们可以更灵活地适应不同的显示条件和用户设置。

  • em：相对于当前对象的字体大小。1em 等于当前元素的字体大小。如果未指定，则等于浏览器默认的字体大小。
  • rem：相对于根元素（HTML）的字体大小。1rem 等于 <html> 元素的字体大小。
  • ex：相对于当前对象的小写字母 "x" 的高度。
  • ch：相对于字符 "0" 的宽度。
  • vw：相对于视口宽度的百分比，1vw 等于视口宽度的1%。
  • vh：相对于视口高度的百分比，1vh 等于视口高度的1%。
  • vmin：相对于视口较小维度的百分比，即取 vw 和 vh 中较小的一个。
  • vmax：相对于视口较大维度的百分比，即取 vw 和 vh 中较大的一个。

百分比单位

  • %：相对于父元素的字体大小。例如，如果父元素的字体大小为16px，那么子元素使用font-size: 50%;将会是8px。

使用建议

  • 响应式设计：对于需要响应不同屏幕尺寸的设计，推荐使用相对单位如em, rem, vw, vh等，因为它们可以根据用户的屏幕大小和浏览器窗口自动调整。
  • 固定尺寸：如果你希望字体在所有设备上保持一致的视觉效果，可以考虑使用绝对单位如px或pt。
  • 可读性与可访问性：使用相对单位有助于提高网站的可读性和可访问性，因为它允许用户通过浏览器设置调整文本大小。
Tsinkaη
关注
前端开发入门到实战：CSS中字体单位：px、em、rem和%
web前端开发学习教程
05-25 819
对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。 “网页”和“印刷”的单位 若要把单位做区隔，最简单可以分为“网页”和“印刷”两大类，通常对于CSS来说只会应用到网页的样式，毕竟真正要做印刷，还是会倾向透过排版软件来进行...
css中一些常用的font-size字体单位和line-height详解
11-20
在CSS中，`font-size`和`line-height`是两个重要的样式属性，它们分别用于设置字体大小和行高。下面将详细阐述这两种单位及其在实际应用中的效果。 首先，我们来了解一下`font-size`中常用的单位： 1. **px (像素)...
CSS字体单位
weixin_33766168的博客
11-25 113
一、前言 在CSS样式中，当文本缩放的时候使用font-size属性是最难以理解的方面之一。在CSS中，你有4种不同的选择，能够让你设置文本在浏览器中的展示。那么这4种单位哪一种更适合呢？这个问题引发了各种各样不同的争论和评价。想要找到一个比较权威的回答可能比较困难，因为这个问题比较难回答。 PS: 半年前只翻译啦一半，半夜打开一看原文突...
css字体单位
jiang_my的博客
07-30 874
了解： 首先先了解四个字体单位：px  em  pt  rem px：单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的，国内推荐； em：单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多； pt：全称为point，但中文不叫“点”，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。 ...
CSS——字体大小最常用的单位
weixin_30345577的博客
04-04 410
px (像素): 将像素的值赋予给你的文本。这是一个绝对单位，它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。 ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手, 但它是可行的，如下图所示。为什么要使用这个麻烦的单位呢? 当你习惯...
CSS单位（字体）
KevinChen
07-21 687
px\em\rem三者介绍
CSS字体大小单位
weixin_34013044的博客
08-22 352
2019独角兽企业重金招聘Python工程师标准>>> ...
css 字体单位之间的区分以及字体响应式的实现详解
09-24
在CSS中，字体单位的选择对页面的响应式设计至关重要，因为它们直接影响文本在不同设备和视窗尺寸下的可读性。下面将详细讲解常见的几种字体单位：px、em、pt，以及新兴的rem和vw/vh/vmin，并讨论如何实现字体的响应...
CSS 字体单位em简介
01-21
国外人士非常重视网站的易用性，相当一部分外国站点已经使用em作为字体单位。 1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。因此，12px = 0
css的字体单位
dianqianfu3698的博客
01-17 132
我将为大家介绍3种字体单位，分别是px,em和rem。首先我先为大家大致介绍一下，一般初学者使用字体单位px较多，1px该多大就多大是一个固定值,也就是px是一个绝对字体单位。而em和rem是相对字体单位，虽然em和rem是相对字体单位但是它们又有所不同，em是相对于它的父级字体大小，rem是相对于html的字体大小。现在大家肯定还不是很明白，接下来我将用一段代码向大家展示。 1.首...
CSS文字单位
益达的小作坊
03-30 592
搬运地址：http://www.bbs0101.com/archives/13.html详细讲解css单位px,em和rem的含义以及它们之间的区别暂无评论 一.首先介绍一下pxpx就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现！可但是！但可是！如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-）
CSS 单位
qq_30436011的博客
09-02 1282
在不同的设备之间，每 1 个 CSS 像素所代表的物理像素是可以变化的。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。当使用这个单位时，无论显示器的分辨率是多少，打印在纸上的结果都是一样的。这些单位比较适合用于创建全视区界面，例如移动设备的界面，因为元素是根据视区的尺寸而变化的，与文档树中的任何元素都没有关系。这四个单位都是视窗单位，所谓的视窗，在web端指的就是可视区域，移动端的视窗指的就是布局视窗。
CSS单位和字体
weixin_73735141的博客
05-18 452
厘米（cm）毫米（mm）英寸（in）像素（px）百分比（%）em（相对于父级元素字体大小）rem（相对于根元素的字体大小）vw（相对于视口宽度的百分比）vh（相对于视口高度的百分比）vmin（相对于视口宽度和高度中较小一方的百分比）vmax（相对于视口宽度和高度中较大一方的百分比）deg是角度单位，0deg代表12点方向，角度值代表顺时针转过的角度。
前端——CSS的几种字体单位
新手小白学习记录贴
02-01 754
vw：视窗单位，表示视窗宽度的百分比，1vw表示视窗宽度的1%，例如，视窗宽度为1000px，那么1vw表示10px。无论设备屏幕大小如何，字体大小始终是视窗宽度的固定比例，但也可能存在一些问题，比如在小屏幕上可能字体看起来太小，而在大屏幕上可能字体看起来太大。实际使用时应根据不同设备和屏幕大小调整比例。em：相对单位，相对于父元素的大小，1em表示1个父元素字体大小；pt：磅，绝对单位，无法缩放，通常只用在已经知道是哪种输出设备的情况下。px：像素单位，在任何媒体上都可以保证一个像素的差别是可见的。
前端开发【CSS字体大小单位】
罗忠浩的博客
03-15 2322
在HTML/CSS中，字体大小的单位有很多，涉及到响应式布局时常用的px就显得很不好用，现在来谈谈常用的字体大小单位： 1.px：绝对单位，页面按精确像素展示（日常使用最多） 2.em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值，默认1em=16px。 3.rem：相对单位，可理解为”root
CSS常见的 9 个单位汇总！
u013179804的博客
04-29 1828
CSS 单位是 CSS（层叠样式表）中用来指定尺寸、长度和其他度量值的一系列标准，使得样式表能够更精确地控制网页的布局和外观。尺寸定义：CSS 单位用于定义网页元素的大小、间距和位置，包括 width 宽度、height 高度、margin 边距、padding 填充、font-size 字体大小等。响应式设计：通过使用视口单位（如vwvh）和相对单位（如emrem），可以创建能够根据用户设备的屏幕尺寸和分辨率自适应的布局。跨浏览器兼容性：合理的单位选择有助于确保网页在不同浏览器和设备上保持一致的显示效果。
CSS中常用的字体单位
zcn596785154的博客
09-22 2089
1、pxpx单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备。2，ptPT是point(磅)缩写，是一种固定长度的度量单位,大小为1/72英寸。如果在web上使用pt做单位的文字
一文读懂 CSS 单位
lsq191690的博客
08-22 1760
说起 CSS 单位，我们最常用的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就来学习一下 CSS 中单位！
CSS中的几种尺寸单位
风清扬的专栏
02-10 3288
请注意，不同的屏幕密度（dpi）会导致不同的换算结果，因此通常建议使用 em 或 rem 单位来定义字体大小和元素大小，而不是使用实际尺寸单位（如 cm 或 in）。请注意，不同的屏幕密度（dpi）会导致不同的换算结果，因此通常建议使用 em 或 rem 单位来定义字体大小和元素大小，而不是使用实际尺寸单位（如 in 或 cm）。请注意，不同的单位在不同的情况下适用性不同，因此需要根据需求选择合适的单位。不同的单位在不同的情况下适用性不同，因此需要根据需求选择合适的单位。
CSS中字体设置有哪些
最新发布
10-01
CSS中的字体设置主要包括以下几个方面： 1. **`font-family`**：这是最基本的字体属性，用于指定元素应该显示的字体系列。你可以提供一系列的字体名，从用户浏览器支持的第一种开始，直到最后一种。 ```css font-family: 'Arial', sans-serif; ``` 2. **`font-size`**：控制文本的大小，可以使用像素值、em、rem、百分比或一些相对单位。 ```css font-size: 16px; ``` 3. **`font-weight`**：改变文字的粗细，有normal（常规）、bold（粗体）、bolder（更粗）和lighter（更轻）等。 ```css font-weight: bold; ``` 4. **`font-style`**：设置斜体样式，包括normal（正常）、italic（斜体）和oblique（倾斜）。 ```css font-style: italic; ``` 5. **`line-height`**：行高，决定了文本间的垂直距离。 ```css line-height: 1.5; ``` 6. **`letter-spacing`**：调整字符间距。 ```css letter-spacing: 2px; ``` 7. **`text-transform`**：改变文本的大小写形式，如uppercase（大写）、lowercase（小写）或capitalize（首字母大写）。 ```css text-transform: uppercase; ``` 8. **`font-variant`**：对某些特殊字体的变体处理，比如small-caps（小写大写字母）。 ```css font-variant: small-caps; ``` 9. **`font-feature-settings`**：控制OpenType特性的应用，例如装饰线和连字。 ```css font-feature-settings: "liga" on; ``` 每个属性都可以单独使用，也可以组合在一起为元素创建个性化的字体样式。同时，现代CSS还允许动态加载Web字体（@font-face）以增强可用字体选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值