- 面向对象编程中的“类” (Class in OOP)：在 Python、Java、C++ 等语言中，用代码定义一个字体对象，封装其属性和行为。
- CSS 中的“类” (Class in CSS)：在网页样式中，定义一组字体样式，并给 HTML 元素应用这个类。
我会分别从这两个角度详细讲解如何“给字体建类”，并提供代码示例。
（图片来源网络，侵删）
在编程中为字体创建一个“类”（面向对象）
在编程中,创建一个 Font 类可以让你方便地管理字体的各种属性（如名称、大小、粗细、颜色等）和行为（如渲染、测量宽度等），这使得代码更加模块化、可复用和易于维护。
定义类的属性
一个字体对象通常包含以下基本属性：
- Family: 字体系列，如 "Arial", "Times New Roman", "思源黑体"。
- Size: 字体大小，如 12, 16, 24 (单位通常是 pt, px, em)。
- Weight: 字体粗细，如 "normal", "bold", 100, 700。
- Style: 字体样式，如 "normal", "italic"。
- Color: 字体颜色，如 "#000000", "red"。
- Variant: 字体变体，如 "small-caps"。
- Line Height: 行高。
定义类的方法
类的方法是对象可以执行的操作：
render(text): 在指定位置渲染一段文本。measure_width(text): 测量文本的宽度。clone(): 创建当前字体设置的一个副本，并可以修改部分属性。to_css(): 将字体设置转换为一个 CSSfont声明字符串。
Python 示例
下面是一个用 Python 创建 Font 类的完整示例，这个例子不依赖于特定的图形库，而是专注于逻辑。
（图片来源网络，侵删）
class Font:
"""
一个表示字体的类，封装了字体的属性和行为。
"""
def __init__(self, family="Arial", size=12, weight="normal", style="normal", color="#000000"):
"""
初始化字体对象。
参数:
family (str): 字体系列名称。
size (int or float): 字体大小。
weight (str or int): 字体粗细 (e.g., "normal", "bold", 400, 700)。
style (str): 字体样式 (e.g., "normal", "italic")。
color (str): 字体颜色 (十六进制或颜色名称)。
"""
self.family = family
self.size = size
self.weight = weight
self.style = style
self.color = color
def __str__(self):
"""返回字体的可读描述。"""
return (f"Font(family='{self.family}', size={self.size}, "
f"weight='{self.weight}', style='{self.style}', color='{self.color}')")
def to_css(self):
"""
将字体属性转换为 CSS font 简写属性字符串。
这是一个非常实用的方法，可以直接用于网页样式。
"""
# CSS font-shorthand 的顺序是: style weight size/line-height family
parts = []
if self.style != "normal":
parts.append(self.style)
if self.weight != "normal":
parts.append(str(self.weight))
# 大小和行高 (这里行高默认为1.2倍大小)
parts.append(f"{self.size}px/1.2")
parts.append(self.family)
return " ".join(parts)
def clone(self, **kwargs):
"""
创建当前字体对象的一个副本，并允许修改部分属性。
这是一个非常强大的设计模式。
示例:
new_font = my_font.clone(size=24, color="blue")
"""
# 获取当前所有属性
current_attrs = {
'family': self.family,
'size': self.size,
'weight': self.weight,
'style': self.style,
'color': self.color
}
# 用传入的 kwargs 更新属性
current_attrs.update(kwargs)
# 返回一个新的 Font 实例
return Font(**current_attrs)
# --- 使用示例 ---
# 1. 创建一个默认字体
default_font = Font()
print(f"默认字体: {default_font}")
print(f"CSS 表示: {default_font.to_css()}")
print("-" * 20)
# 2. 创建一个自定义字体font = Font(
family="Helvetica Neue",
size=28,
weight="bold",
color="#333333"
)
print(f"标题字体: {title_font}")
print(f"CSS 表示: {title_font.to_css()}")
print("-" * 20)
# 3. 使用 clone 方法创建新字体，避免重复代码
body_font = title_font.clone(size=16, weight="normal", color="#555555")
print(f"正文字体 (通过 clone 创建): {body_font}")
print(f"CSS 表示: {body_font.to_css()}")
print("-" * 20)
# 4. 假设我们有一个函数来渲染文本 (伪代码)
def render_text(text, font):
print(f"使用 '{font.family}' 渲染文本: '{text}' (颜色: {font.color})")
render_text("你好，世界！", title_font)
render_text("这是一段正文。", body_font)
JavaScript (ES6) 示例
在 JavaScript 中，同样可以使用 class 关键字来实现。
class Font {
/**
* @param {object} options - 字体配置选项
* @param {string} [options.family="Arial"] - 字体系列
* @param {number} [options.size=12] - 字体大小
* @param {string|number} [options.weight="normal"] - 字体粗细
* @param {string} [options.style="normal"] - 字体样式
* @param {string} [options.color="#000000"] - 字体颜色
*/
constructor(options = {}) {
this.family = options.family || "Arial";
this.size = options.size || 12;
this.weight = options.weight || "normal";
this.style = options.style || "normal";
this.color = options.color || "#000000";
}
/**
* 返回 CSS font 字符串。
* @returns {string}
*/
toCss() {
// 注意：JS 中模板字符串更方便
return `${this.style} ${this.weight} ${this.size}px/${this.size * 1.2}px ${this.family}`;
}
/**
* 克隆当前字体并应用新的配置。
* @param {object} newOptions - 新的配置选项
* @returns {Font}
*/
clone(newOptions = {}) {
const currentOptions = {
family: this.family,
size: this.size,
weight: this.weight,
style: this.style,
color: this.color,
};
// 合并配置，newOptions 优先
const mergedOptions = { ...currentOptions, ...newOptions };
return new Font(mergedOptions);
}
}
// --- 使用示例 ---
const defaultFont = new Font();
console.log("默认字体:", defaultFont);
console.log("CSS 表示:", defaultFont.toCss());
console.log("--------------------");
const titleFont = new Font({
family: "Georgia",
size: 32,
weight: "bold",
color: "darkblue"
});
console.log("标题字体:", titleFont);
console.log("CSS 表示:", titleFont.toCss());
console.log("--------------------");
const bodyFont = titleFont.clone({ size: 16, weight: "normal" });
console.log("正文字体 (通过 clone 创建):", bodyFont);
console.log("CSS 表示:", bodyFont.toCss());
在 CSS 中为字体创建一个“类”
在网页开发中,我们通常不直接在 HTML 元素上写内联样式，而是定义 CSS 类，这样可以将样式与内容分离，实现样式的复用和统一管理。
定义基础字体类
你可以定义一些基础的字体类,比如用于标题、正文、引用等。
/* styles.css */
/* --- 基础排版重置 (可选但推荐) */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
}
/* --- 字体类定义 --- */
/* 1. 标题字体类 */
.font-title {
font-family: "Georgia", "Times New Roman", serif;
font-size: 2.5rem; /* 40px */
font-weight: 700;
line-height: 1.2;
color: #1a1a1a;
letter-spacing: -0.02em; /* 字间距微调 */
}
/* 2. 副标题字体类 */
.font-subtitle {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1.5rem; /* 24px */
font-weight: 300; /* 细体 */
line-height: 1.4;
color: #444;
}
/* 3. 正文/段落字体类 */
.font-body {
font-family: "Lato", "Noto Sans SC", sans-serif;
font-size: 1rem; /* 16px */
font-weight: 400;
line-height: 1.7;
color: #333;
}
/* 4. 说明/小字字体类 */
.font-caption {
font-family: Arial, sans-serif;
font-size: 0.875rem; /* 14px */
font-weight: 400;
line-height: 1.5;
color: #666;
text-transform: uppercase; /* 可选：大写 */
letter-spacing: 0.1em;
}
在 HTML 中应用字体类
你可以轻松地将这些类应用到任何 HTML 元素上。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">字体类示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="font-title">这是一个主标题</h1>
<p class="font-subtitle">这是一个引人注目的副标题，用来概括下面的内容。</p>
<p class="font-body">
这是一段正文内容，它使用了我们定义的 .font-body 类，拥有清晰易读的字体、字号和行高。
通过这种方式，我们可以确保整个网站的正文字体风格统一，并且易于维护，如果将来需要更改正文的字体，
我们只需要修改 CSS 文件中的一处地方即可。
</p>
<figure>
<img src="image.jpg" alt="示例图片">
<figcaption class="font-caption">图 1: 这是一个图片说明，使用了小字类。</figcaption>
</figure>
</body>
</html>
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
编程中的 Font 类 |
- 字体设计工具开发 - 游戏引擎中的文本渲染 - 任何需要动态、程序化控制字体的后端/前端应用 |
- 高度灵活：可以动态创建和修改字体属性。 - 逻辑封装：将字体相关的数据和操作放在一起。 - 易于扩展：可以方便地添加新属性和方法。 |
- 需要编写代码，不适用于纯静态的网页样式。 |
| *CSS 中的 `.font-` 类** | - 网页前端开发 - UI/UX 设计规范落地 |
- 关注点分离：样式与 HTML 结构分离。 - 复用性强：一套样式定义，多处应用。 - 维护简单：集中管理，修改一处影响全局。 |
- 灵活性较低：样式在编译时确定，运行时动态修改较麻烦（需借助 JS）。 - 类名管理：当样式变多时，需要良好的命名和组织结构。 |
如何选择？
- 如果你正在开发一个应用程序,需要根据用户设置或数据动态改变字体，你应该使用编程中的
Font类。 - 如果你正在构建一个网站,希望有一套统一、美观的字体样式，并且方便维护，你应该使用 CSS 类。
在很多复杂的项目中,这两种方法会结合使用：用 JavaScript 的 Font 类来管理应用内的字体配置，然后通过 to_css() 方法动态生成样式并应用到页面上。
