CSS核心样式（1）——字体类样式（常用的4种属性）

hushuo

发布于 2021-4-6 18:16

浏览

0收藏

首先继续上篇讲解了字体类样式的2个基础属性：字体属性font-family，字号属性font-size；
这篇继续介绍：字体类样式（常用的4种属性）

CSS核心样式（1）——字体类样式（常用的4种属性）-鸿蒙开发者社区

一、粗细 font-weight

CSS核心样式（1）——字体类样式（常用的4种属性）-鸿蒙开发者社区示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体粗细属性font-weight</title>
  <style>
    .ps1 {
      font-weight: 700; /* 等价于font-weight：bold */
    }
    .ps2 {
       font-weight: normal;
    }
    .ps3 {
       font-weight: lighter;
    }
    </style>
</head>
<body>
  <p class="ps1">看看文字是否加粗显示?</p>
  <b>这是 b 标签内部的文字</b><!--加粗效果跟b标签效果做对比-->
  <p class="ps2">看看文字是否正常粗细显示?</p>
  <p class="ps3">看看文字是否更细显示?</p>
  </body>
</html>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

CSS核心样式（1）——字体类样式（常用的4种属性）-鸿蒙开发者社区

二、字体风格 font-style
CSS核心样式（1）——字体类样式（常用的4种属性）-鸿蒙开发者社区
示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体风格属性font-style </title>
  <style>
    .fs1 {
      font-style: normal;
    }
    .fs2{
      font-style: italic;
    }
    .fs3 {
      font-style: oblique;
    }
  </style>
</head>
<body>
  <p class="fs1">看一下文字是否正常显示？normal</p>
  <p class="fs2">看一下文字是否进行斜体显示？italic</p>
  <p class="fs3">看一下文字是否进行倾斜显示？oblique</p>
  <i>这是i标签内部的文字</i><!--与i标签效果做对比-->
</body>
</html>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

CSS核心样式（1）——字体类样式（常用的4种属性）-鸿蒙开发者社区
三、行高 line-height
（实际应用中通过设计图获取，量取数值时需要使用一些辅助工具，比如：FireWorks）

用Fireworks量取行高的步骤：
1.软件初始设置：选中文字工具，在属性栏中将平滑消除锯齿，更改为不消除锯齿，方便文字的像素点清晰显示。

CSS核心样式（1）——字体类样式（常用的4种属性）-鸿蒙开发者社区 2.确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作时，设置一个与内容文字颜色差异较大的字体颜色。
3.根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行高值。

四、字体综合 font
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔。

写法1
font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序。

font: 14px "arial" "SimSum" "Microsoft Yahei";1.

写法2
font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔。

font: 14px/28px "arial" "SimSum" "Microsoft Yahei";1.

写法3
如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能更改位置。

font: italic bold 14px/28px "arial" "SimSum" "Microsoft Yahei";1.

font: bold italic  14px/28px "arial" "SimSum" "Microsoft Yahei";1.

分类

标签

相关推荐

鸿蒙系统UI标准：HarmonyOS中的字体标准

starLWW • 4.0w浏览 • 7回复
鸿蒙开源组件——多种样式的选项条

jacksky • 7664浏览 • 0回复
鸿蒙开源组件——竖直样式的 Stepper 组件

jacksky • 6751浏览 • 0回复
详解Java、JS、TS组件常用属性

Tuer白晓明 • 1.4w浏览 • 7回复
Java常用核心类(详细讲解)

俺想吃蜂蜜 • 7922浏览 • 0回复
HarmonyOS css样式与普通HTML css样式之间存在的区别

中软小助手 • 1.4w浏览 • 2回复
聊聊样式穿透 vue 中的 scoped

xjjFeRookie • 6465浏览 • 1回复
#冲刺创作新星# [五]OpenHarmony的4种编译方法

左翼风发 • 1.6w浏览 • 8回复
HarmonyOS API：动画样式

joytrian • 4972浏览 • 0回复
HarmonyOS API：通用样式

joytrian • 3838浏览 • 0回复
OpenHarmony定义组件重用样式：@Styles装饰器

OpenHarmony开发者 • 4505浏览 • 0回复
二、组件和样式基础

亚鲁鲁666 • 7789浏览 • 0回复
HarmonyOS NEXT ArkUI - 尺寸约束样式

鱼弦CTO • 3488浏览 • 0回复
滚动条样式

Bige_long • 440浏览 • 0回复
（三三）HarmonyOS Design 的动态样式与主题：动态主题切换与样式动态绑定

小_铁 • 2875浏览 • 0回复
HarmonyOS样式处理

liuyang8888 • 2177浏览 • 0回复
ArkUI的样式

无名的Pupil • 2430浏览 • 0回复
ArkUI的样式二

无名的Pupil • 3653浏览 • 0回复
HarmonyOS：ArkTS 多态样式自学指南

李游LEO • 2896浏览 • 0回复

hushuo

这个用户很懒，还没有个人简介

帖子

视频

声望

粉丝

关注

51CTO

51CTO博客

51CTO学堂

CSS核心样式（1）——字体类样式（常用的4种属性）

订阅鸿蒙技术特刊，精选内容抢先看