- CSS 菜鸟教程
- CSS - 教程
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 包含
- CSS - 度量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图像
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - border-block 属性
- CSS - 边框内联
- CSS - 边距
- CSS - 列表
- CSS - Padding 属性
- CSS - 光标
- CSS - 轮廓
- CSS - 维度
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉列表
- CSS - visibility 属性
- CSS - Overflow 属性
- CSS - 清除修复
- CSS - float(浮点)
- CSS - 箭头
- CSS - resize 属性
- CSS - quotes 属性
- CSS - order 属性
- CSS - Position 属性
- CSS - hypens 属性
- CSS - :hover(悬停)
- CSS - display(显示)
- CSS - focus 属性
- CSS - zoom(缩放)
- CSS - translate 属性
- CSS - Height 属性
- CSS - hyphenate-character 属性
- CSS - Width 属性
- CSS - opacity 属性
- CSS - z-index 属性
- CSS - bottom 属性
- CSS - 导航栏
- CSS - 覆盖
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - Atrribute 选择器属性
- CSS - 运算器
- CSS - root
- CSS - 盒子模型
- CSS - 计数器
- CSS - Clip (Obsolete) 属性
- CSS - writing-mode 属性
- CSS - Unicode-bidi 属性
- CSS - min-content 属性
- CSS - 全部
- CSS - inset 属性
- CSS - isolation 属性
- CSS - overscroll-behavior 属性
- CSS - justify-items 属性
- CSS - justify-self 属性
- CSS - tab-size 属性
- CSS - pointer-event 属性
- CSS - place-content 属性
- CSS - place-items 属性
- CSS - place-self 属性
- CSS - max-block-size 属性
- CSS - min-block-size 属性
- CSS - mix-blend-mode 属性
- CSS - max-inline-size 属性
- CSS - min-inline-size 属性
- CSS - offset 属性
- CSS - accent-color 属性
- CSS - user-select 属性
- CSS 高级
- CSS - grid 属性
- CSS - Grid 布局
- CSS - flexbox
- CSS - vertical-align 属性
- css - positioning
- css - layers
- css - pseudo_classes
- CSS - 伪元素
- CSS - @ 规则
- CSS 滤镜 - text-effect 属性
- CSS 分页媒体
- CSS 打印
- CSS - 布局
- CSS - 验证
- CSS - 图像精灵
- CSS - !important
- CSS - 数据类型
- CSS3 教程
- CSS - 圆角
- CSS - 边框图像
- CSS - 多种背景
- CSS - 渐变
- CSS - box-shadow 属性
- CSS - box-decoration-break 属性
- CSS - caret-color 属性
- CSS - text-shadow 属性
- CSS - 2D 转换
- CSS - 3D 变换
- CSS - transition 属性
- CSS - 动画
- CSS - 多列布局
- CSS - 盒子大小调整
- CSS - 工具提示
- CSS - buttons
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 值函数
- CSS - 数学函数
- CSS - Mask 属性
- CSS - shape-outside 属性
- CSS - 样式图像
- CSS - 特异性
- CSS - 自定义属性
- CSS 响应式
- CSS - 响应式网页设计 (RWD)
- CSS - 响应式设计视口
- CSS - 响应式网格视图
- CSS - 响应式媒体查询
- CSS - 响应式图像
- CSS - 响应式视频
- CSS - 响应式框架
- CSS 引用
- CSS - 所有属性列表
- CSS - 颜色引用
- CSS - 浏览器支持参考
- CSS - 网页字体
- CSS 工具
- CSS - PX 到 EM 的转换
CSS - 网页字体
在网站中使用但默认情况下未安装在用户设备上的字体称为 Web 字体。CSS 允许指定在 Web 上可用的字体文件,以便在访问时与您的网站一起轻松下载。
CSS Web Fonts - 字体格式类型
下面解释了不同类型的字体格式:
- TrueType 字体 (TTF):TrueType 字体是 Apple 开发的一种轮廓字体。它是 MacOS 和 Windows 操作系统最常见的字体格式。
- OpenType 字体 (OTF):OpenType 字体源自 TrueType 字体格式的基本结构,但向其添加了一些额外的复杂数据结构。它提供了更多的排版控制。
- Web 开放字体格式 (WOFF):顾名思义,它是 Mozilla 开发的一种开放 Web 字体。它使用 TrueType、OpenType 和 Open Font Format 使用的结构压缩版本,以及元数据和专用数据结构的附加信息。
- Web Open Font Format2 (WOFF2):它是 Web Open Font Format 的第二个版本。表示为 woff2。这种字体具有比 woff 更好的压缩算法。
- SVG 字体/形状:SVG 字体是 OpenType 字体格式的新版本。这种格式允许字符以多种颜色显示,具有不同的透明度,甚至动画。
- 嵌入式开放类型字体 (EOT):这些是 Microsoft 设计的 OpenType 字体的紧凑形式,用作网页上的嵌入字体。只有 Microsoft Internet Explorer 支持它们。
CSS Web 字体 - 关键点
以下部分指定了与 Web 字体相关的一些要点:
- 网络上的字体通常不是免费的,无法使用。您要么需要付费,要么需要遵循许可条件,例如在您的代码中或在您的网站上向字体的创建者提供信用。窃取这些字体或在没有给予适当信用的情况下使用它们,在道德上是不正确的。
- Web 开放字体格式版本 1 和 2(WOFF 和 WOFF2)受到主要浏览器的支持,甚至是较旧的浏览器。
- WOFF2 文件格式完全支持 TrueType 和 OpenType 规范,包括可变字体、彩色字体和字体集。
- 重要的是字体文件的列出顺序。浏览器从提供的多个字体文件列表中选择它能够使用的第一个字体文件。因此,您应该首先列出首选格式。当浏览器无法理解某种格式时,它会回退到下一个格式。
- 使用旧版浏览器时,您应提供 EOT(嵌入式开放类型)、TTF(真类型字体)和 SVG Web 字体以供下载。
CSS 网页字体 - @font面规则
使用@font面 CSS 规则,可以为未安装在用户设备上的网站指定字体。@font面规则有许多描述符来识别和描述字体。请参阅以下代码块,了解 @font-face at 规则语法:
@font-face {
font-family: "Sansation Light Font";
src: url("font/SansationLight.woff") format("woff");
font-weight: normal;
font-style: normal;
}
上述语法列出了以下属性:
- font-family:指定引用字体时所用的名称。该名称可以是您想要的任何名称,但您应该在 css 代码中一致地使用此名称。
- src:指定要通过 CSS 导入的字体文件的路径。url() 和字体文件的格式,通过。格式,这是可选的。指定格式很有用,因为它允许浏览器确定需要使用的字体。可以使用逗号分隔的值进行多个声明。
- font-weight:指定字体的粗细(或粗体)。接受两个值来指定 font-face 支持的范围,例如 font-weight: 100 400;
- font-style:指定字体的样式是否应使用其字体系列中的普通、斜体或倾斜字体进行设置。
注意:还可以为 Web 字体指定 font-variant 和 font-stretch 等值,在较新的浏览器中指定 unicode-range。当仅当页面包含这些指定字符时才下载字体时,此范围很有用,从而节省了不必要的下载。
让我们看一个应用@font面规则的例子:
<html>
<head>
<style>
@font-face {
font-family: "Sansation Light Font";
src: url("font/SansationLight.woff");
}
body {
font-family: "Sansation Light Font", serif;
}
</style>
</head>
<body>
<h2>@font-face at-rule</h2>
<p>This is SansationLight Font.</p>
</body>
</html>
CSS 网页字体 - @font-face / font-stretch
以下示例演示了字体拉伸值的设置,使用@font面规则内使用的百分比范围 50% 和 200%:
<html>
<head>
<style>
@font-face {
src: local("monospace");
font-family: "f1";
font-style: normal;
font-stretch: 50% 200%;
}
.container {
font: 2rem "f1", sans-serif;
}
.font-condensed {
font-stretch: 50%;
}
.font-normal {
font-stretch: 100%;
}
.font-ultra-expanded {
font-stretch: 200%;
}
.font-semi-condensed {
font-stretch: semi-condensed;
}
.font-extra-condensed {
font-stretch: extra-condensed;
}
.font-ultra-condensed {
font-stretch: ultra-condensed;
}
.font-semi-expanded {
font-stretch: semi-expanded;
}
.font-extra-expanded {
font-stretch: extra-expanded;
}
</style>
</head>
<body>
<div class="container">
<p class="font-condensed">ultra-condensed (50%)</p>
<p class="font-normal">normal (100%)</p>
<p class="font-expanded">ultra-expanded (200%)</p>
<p class="font-semi-condensed">semi-condensed</p>
<p class="font-ultra-condensed">ultra-condensed</p>
<p class="font-semi-expanded">semi-expanded</p>
<p class="font-extra-expanded">extra-expanded</p>
</div>
</body>
</html>
上面的示例显示了 @font-face at-rule 的声明及其描述符,例如 font-family、src、font-style 和 font-stretch。
CSS Web Fonts - 在线字体服务
大多数在线字体服务都是基于订阅的,通常存储和提供您可以使用的字体。Google Fonts 是一项免费服务,易于使用。请参阅以下步骤以使用 Google 字体:
- 转到 Google 字体。
- 搜索所需的字体或使用提供的过滤器查找您选择的字体,然后选择几种字体。
- 您可以通过单击字体名称旁边的 (+) 加号按钮来选择字体系列。
- 选择字体系列后,按“查看所选系列”按钮。
- 复制结果屏幕上显示的 HTML 代码行,并将其粘贴到 html 代码的 <head> 标记下。将其放在 <link> 元素上方,以便在 CSS 中使用之前导入所需的字体。
- 要将自定义字体应用于 HTML,请复制 CSS 中列出的 CSS 声明。
CSS Web 字体 - 导入字体
以下示例演示了在 html 代码中导入 google 字体并使用它。
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lobster|Raleway' rel='stylesheet' type='text/css'>
<style>
html {
font-size: 12px;
margin: 0;
font-family: sans-serif;
}
body {
width: 80%;
max-width: 600px;
margin: 0 auto;
}
h1 {
font-size: 4.2rem;
}
h2 {
font-size: 3.5rem;
}
h1, h2 {
font-family: 'Lobster', cursive;
}
p {
font-size: 1.4rem;
line-height: 1.6;
font-family: 'monospace', sans-serif;
}
</style>
</head>
<body>
<h1>Web Font</h1>
<h2>Google Font</h2>
<p>Using the Google Font (Lobster) by importing it.</p>
</body>
</html>