CSS基础 字体

本文介绍了CSS中字体的长度单位,如px、%、em、rem和vw/vh,颜色单位包括颜色单词、RGB、RGBA、十六进制以及HSL/HSLA,并详细讲解了字体分类、字体样式、行间距以及自定义字体的方法。
摘要由CSDN通过智能技术生成

1、长度单位

1:像素 px

         其实就是一个个发光的小点,肉眼是看不到的,这也是我们现阶段最常用的单位

         而且是个固定(绝对)单位

        2:百分比 %

         它是个相对单位,相对于其父元素的宽度变化而变化,一般情况可以用来做流动式布局

        3.em

         也是个相对单位,它相对于自身字体大小的变化而变化,如果自身没有设置字体大小,就会继承其

         父元素或者祖先元素的字体大小,直到继承根标签(html)的字体大小,如果根标签没有设置字体大小,

         html根标签默认的字体大小是16px

        4.rem  

        也是个相对单位,它是相对于根标签(html)标签的字体大小变化而变化,如果根标签没有设置字体大小,

         html根标签默认的字体大小是16px

        5、vw

        6、vh

2、颜色单位

1:在CSS可以直接使用颜色的单词来表示不同的颜色

  red green  yello black等等

  但不同的颜色单词种类繁多,也不好拼写,不好描述,所以不推荐使用

  2:使用RGB值来表示不同的颜色

  语法: rgb(red, green, blue)

  分别以红色,绿色,蓝色三种颜色为基本色,根据不同的浓度值来勾兑出不同的颜色

  浓度的范围:0-255,0最小

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在CSS中,可以通过使用系统自带字体来设置网页上的文本样式。通过设置font-family属性为"system-ui"来引用系统默认字体。这将使得网页在不同操作系统和设备上都使用其默认字体,使字体风格与操作系统保持一致。 在某些情况下,特定的字体可能无法在系统中找到,为了避免这种情况,可以设置备用字体。例如,可以使用以下代码: ``` font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; ``` 这个备选列表包含了多个常见的系统字体,如苹果系统字体、Mac系统字体、Windows系统字体等。如果用户的操作系统上安装有这些字体,网页将使用它们作为默认字体。如果用户系统上没有任何这些字体,那么CSS会默认使用常见的无衬线字体进行显示。 通过使用系统自带字体,可以确保网页在不同系统上呈现一致的视觉效果,并最大限度地提高可读性和用户体验。 ### 回答2: 在CSS中,我们可以使用系统自带字体来为网页设计提供更多的选择。系统自带字体是指操作系统预装的字体,例如Windows系统中的宋体、微软雅黑和苹方等。为了使用系统自带字体,我们可以在CSS的font-family属性中设置字体的名称。 首先,我们需要确定所要使用的系统自带字体的名称。可以通过在CSS中设置font-family属性为空值,然后逐个尝试不同的字体名称来查看效果。例如,对于Windows系统,可以将字体名称设置为"SimSun"来使用宋体。 接下来,在CSS中,我们可以通过以下方式来使用系统自带字体: ```css body { font-family: "SimSun", sans-serif; } ``` 在上述代码中,我们将字体名称设置为"SimSun",然后使用sans-serif作为备用字体。这意味着如果系统自带字体不可用,浏览器会尝试使用sans-serif字体来代替。 当网页加载时,浏览器会根据指定的字体名称来寻找并应用系统自带字体。如果用户的操作系统中没有安装相应的字体,浏览器将会自动选择备用字体。 使用系统自带字体可以确保网页在不同的操作系统和设备上都能保持一致的显示效果。但需要注意的是,由于系统自带字体的类型和数量可能因操作系统而异,因此在设计网页时要考虑到字体的兼容性,并选择常见和广泛支持的字体。 ### 回答3: 在CSS中,我们可以通过指定字体族来选择所需的字体。当我们想要使用系统自带字体时,我们可以使用CSS的通用字体族或者通过具体设置来实现。 通用字体族是指在所有计算机上都可以找到的字体,并且不依赖于特定字体文件的命名。这些通用字体族包括serif(衬线字体)、sans-serif(非衬线字体)、monospace(等宽字体)、cursive(手写字体)和fantasy(幻想字体)。通过在CSS中使用这些通用字体族,我们可以使网页在不同操作系统和设备上都能够选择到用户所拥有的系统自带字体。 此外,我们还可以通过具体设置来使用系统自带字体。首先,我们需要了解用户所使用的操作系统及其自带字体。例如,在Windows系统中,我们可以选择使用Arial、Times New Roman或Courier New等字体;在Mac系统中,我们可以使用Helvetica、Arial或Monaco等字体。然后,我们可以在CSS中使用类似以下的代码来指定字体: ```css body { font-family: "Arial", "Helvetica", sans-serif; } ``` 在这个例子中,我们首先指定了Arial字体,如果用户的系统中没有该字体,则会尝试使用Helvetica字体,最后如果两种字体都不可用,则会使用sans-serif字体作为备选。 通过这些方法,我们可以在CSS中选择系统自带字体,从而使网页在各种操作系统和设备上都能够呈现出更一致的字体样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值