当前位置: 首页 > news >正文

re:从0开始的CSS学习之路 6. 字体相关属性

1. 字体相关属性

  1. font-size 字体大小

  2. font-family 字体的系列(字体簇)
    可以设置多个字体,每个字体之间以逗号隔开
    设置多个字体的目的是为了用户尽可能的支持字体
    网页字体的五大类:
    serif 衬线字体
    sans-serif 非衬线字体
    monospace 等宽字体
    cursive 草书字体
    fantasy 虚幻字体
    若字体名称中包含空格,则必须使用双引号

  3. font-weight 字体的粗细
    可选值:
    normal 正常显示(默认值)
    bold 粗体
    lighter 特细
    bolder 特粗
    "number" 利用数值指定粗细100-900,值后没有单位
    400相当于normal 700相当于bold

  4. font-style 字体的样式
    可选值:
    normal 正常显示
    italic 斜体
    通常斜体使用相对较少,反而将斜体设置成normal

字体的简写属性:font,使用一个font属性设置所有的相关属性
font:font-style font-weight font-size/line-height font-family

注意:

  1. 每个属性之间以空格隔开
  2. font-size font-family 不可以省略并且必须按照顺序书写,其他可以省略

示例如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>h1 {font-size: 80px;font-family: monospace;}p {/* font-size: 30px;font-family: serif;font-weight: bolder;font-style: italic; */font: italic bolder 80px serif;}
</head><body><h1>天天好心情 I'M happy</h1><p>今天天气不错</p><p>挺风和日丽的</p><p>我们今天在上课</p><p>我心情挺好的</p>
</body></html>
http://www.lryc.cn/news/298802.html

相关文章:

  • FPGA(基于xilinx)中PCIe介绍以及IP核XDMA的使用
  • docker 运行jar包 指定配置文件
  • ‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序
  • 第9讲用户信息修改实现
  • powershell 离线安装Posh-SSH
  • linux系统下vscode portable版本的c++/Cmake环境搭建002:使用 VSIX 安装VSCODE插件(暂记)
  • PHP特性知识点总结
  • 数据库基本操作
  • 【51单片机】矩阵键盘(江科大)
  • Go语言教学(一)起源
  • 口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
  • ChatGPT高效提问—prompt常见用法(续篇三)
  • IAR报错:Error[Pa045]: function “halUartInit“ has no prototype
  • C++三剑客之std::optional(一) : 使用详解
  • 网络安全漏洞管理十大度量指标
  • Swift Combine 发布者订阅者操作者 从入门到精通二
  • python 笔记:shapely(形状篇)
  • 开源的JS动画框架库介绍
  • MATLAB实现随机森林回归算法
  • 时间序列预测——BiGRU模型
  • django中实现数据库操作
  • 使用 FFmpeg 将视频转换为 GIF 动画的技巧
  • 2024春晚纸牌魔术原理----环形链表的约瑟夫问题
  • HCIA-HarmonyOS设备开发认证V2.0-轻量系统内核内存管理-静态内存
  • 什么是vite,如何使用
  • 基于大语言模型的AI Agents
  • 23种设计模式之抽象工厂模式
  • 飞天使-linux操作的一些技巧与知识点9-zabbix6.0 容器之纸飞机告警设置
  • 京东组件移动端库的使用 Nut-UI
  • 用Python来实现2024年春晚刘谦魔术