Lorem Ipsum 在线生成器指南：历史、用法、替代方案和最佳实践

Lorem Ipsum 是设计和开发领域最广泛使用的占位文本。500 多年来，它一直是行业标准的虚拟文本，用于填充布局、测试排版和预览设计。本指南涵盖了关于 Lorem Ipsum 你需要知道的一切：追溯到公元前 45 年西塞罗的起源，为什么设计师和开发者依赖占位文本，如何在 JavaScript、Python 和 Ruby 中程序化生成，Hipster Ipsum 和 Bacon Ipsum 等流行替代方案，使用占位文本的最佳实践，在 Figma 和 Sketch 中的集成，可访问性考虑因素，以及如何生成更有意义的原型所需的逼真占位数据。

立即试用我们的 Lorem Ipsum 生成器 →

1. 什么是 Lorem Ipsum？它从何而来？

Lorem Ipsum 是自 1500 年代以来印刷和排版行业使用的标准占位虚拟文本。但它的根源比文艺复兴还要深远。

古典起源

与普遍看法相反，Lorem Ipsum 不仅仅是随机文本。它源于公元前 45 年的古典拉丁文学作品，已有 2000 多年的历史。该文本来自马库斯-图利乌斯-西塞罗的《de Finibus Bonorum et Malorum》（善与恶的极限）第 1.10.32 和 1.10.33 节。这部哲学著作是关于伦理学理论的论文，在文艺复兴时期非常流行。

标准的 Lorem Ipsum 段落自 1500 年代开始使用，当时一位不知名的印刷工取出一排活字并将其打乱以制作样本书。它经历了五个世纪的排版、1960 年代向电子排版的过渡，以及 1980 年代以 Aldus PageMaker 等软件为代表的桌面出版革命。

标准段落

最常用的 Lorem Ipsum 段落以"Lorem ipsum dolor sit amet, consectetur adipiscing elit"开头。这个开头已变得如此标志性，全世界的设计师和开发者都能立即识别。"Lorem"这个词本身是"dolorem"的截断形式，在拉丁语中意为"痛苦"。

数字时代的 Lorem Ipsum

随着网页设计的兴起，Lorem Ipsum 在数字原型设计中找到了新家。每个主要设计工具、CMS 平台和开发框架都包含内置的 Lorem Ipsum 生成或插件支持。它仍然是占位文本的事实标准，因为它接近真实英文文本的外观和感觉，而不会携带任何分散注意力的含义。

2. 为什么设计师和开发者使用占位文本

使用占位文本不是偷懒，而是一种深思熟虑的设计策略，在开发工作流中有多个重要目的。

• 聚焦视觉设计：真实内容可能会分散利益相关者对布局、颜色、排版和间距的评估。Lorem Ipsum 让焦点保持在设计决策上。
• 测试排版：占位文本揭示了不同字体、大小、行高和字间距在逼真文本模式下的表现。单个单词或"此处为文本"无法进行同样的测试。
• 防止内容偏见：当审阅者看到真实内容时，他们会本能地开始编辑文字而不是评估设计。虚拟文本可以防止这种"内容陷阱"。
• 填充可变长度内容区域：博客卡片、推荐部分和产品描述都有可变内容。Lorem Ipsum 让你测试短内容和长内容场景。
• 加速原型设计：等待最终文案会减慢设计过程。占位文本让设计师快速行动和迭代，没有内容瓶颈。
• 保持机密性：在客户项目中，使用占位文本可避免在审查过程中意外共享敏感或未发布的内容。

3. Web 开发中的 Lorem Ipsum

Web 开发者在整个开发生命周期中使用 Lorem Ipsum，从初始线框图到最终 QA 测试。

线框图和原型

在线框图阶段，Lorem Ipsum 帮助建立内容层次结构。你可以看到标题、副标题、正文和说明文字如何一起流动。这对响应式设计至关重要，因为内容会在断点间重新排列。

交互原型

在 Figma、Framer 或 Storybook 等工具中构建交互原型时，Lorem Ipsum 提供逼真的文本来填充各种大小的组件。这有助于验证组件在真实内容长度下的行为。

测试和 QA

QA 团队使用 Lorem Ipsum 测试文本溢出、截断、响应行为和国际化。通过生成不同长度的段落，测试人员可以验证布局是否处理了极端情况。

CMS 和模板开发

开发 WordPress 主题、无头 CMS 模板或静态站点生成器时，Lorem Ipsum 填充内容字段，以便开发者可以看到模板如何使用逼真数据渲染。

使用 Emmet 快速生成

大多数代码编辑器支持 Emmet 缩写。输入"lorem"然后按 Tab 生成一段 Lorem Ipsum。使用"lorem10"生成 10 个单词，"lorem100"生成 100 个单词。

4. 程序化生成 Lorem Ipsum

有时候你需要比简单复制粘贴更多的控制。以下是在流行编程语言中生成 Lorem Ipsum 的方法。

JavaScript / TypeScript

使用预定义句子池的轻量级 Lorem Ipsum 生成器：

// Lorem Ipsum Generator in JavaScript
const LOREM_SENTENCES = [
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
  "Duis aute irure dolor in reprehenderit in voluptate velit esse.",
  "Excepteur sint occaecat cupidatat non proident, sunt in culpa.",
  "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.",
  "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.",
  "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis.",
  "Quis autem vel eum iure reprehenderit qui in ea voluptate velit.",
  "At vero eos et accusamus et iusto odio dignissimos ducimus.",
  "Nam libero tempore, cum soluta nobis est eligendi optio cumque.",
  "Temporibus autem quibusdam et aut officiis debitis aut rerum.",
];

function generateLoremIpsum(paragraphs: number = 3, sentencesPerParagraph: number = 4): string {
  const result: string[] = [];
  for (let p = 0; p < paragraphs; p++) {
    const sentences: string[] = [];
    for (let s = 0; s < sentencesPerParagraph; s++) {
      const idx = Math.floor(Math.random() * LOREM_SENTENCES.length);
      sentences.push(LOREM_SENTENCES[idx]);
    }
    // First paragraph always starts with "Lorem ipsum..."
    if (p === 0 && sentences.length > 0) {
      sentences[0] = LOREM_SENTENCES[0];
    }
    result.push(sentences.join(" "));
  }
  return result.join("\n\n");
}

function generateWords(count: number): string {
  const words = LOREM_SENTENCES.join(" ").split(/\s+/);
  const result: string[] = [];
  for (let i = 0; i < count; i++) {
    result.push(words[i % words.length]);
  }
  return result.join(" ");
}

// Usage:
// generateLoremIpsum(3, 4)  => 3 paragraphs, 4 sentences each
// generateWords(50)          => 50 words of Lorem Ipsum

Python

Python 可以用内置字符串方法或流行的 lorem-text 包简单生成 Lorem Ipsum：

# Lorem Ipsum Generator in Python
import random

LOREM_SENTENCES = [
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
    "Duis aute irure dolor in reprehenderit in voluptate velit esse.",
    "Excepteur sint occaecat cupidatat non proident, sunt in culpa.",
    "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.",
    "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.",
    "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis.",
    "Quis autem vel eum iure reprehenderit qui in ea voluptate velit.",
    "At vero eos et accusamus et iusto odio dignissimos ducimus.",
]

def generate_lorem(paragraphs: int = 3, sentences_per_paragraph: int = 4) -> str:
    """Generate Lorem Ipsum paragraphs."""
    result = []
    for p in range(paragraphs):
        sentences = random.choices(LOREM_SENTENCES, k=sentences_per_paragraph)
        if p == 0:
            sentences[0] = LOREM_SENTENCES[0]
        result.append(" ".join(sentences))
    return "\n\n".join(result)

def generate_words(count: int) -> str:
    """Generate a specific number of Lorem Ipsum words."""
    all_words = " ".join(LOREM_SENTENCES).split()
    return " ".join(all_words[i % len(all_words)] for i in range(count))

# Using the lorem-text package (pip install lorem-text):
# from lorem_text import lorem
# lorem.paragraphs(3)
# lorem.sentences(5)
# lorem.words(50)

# Usage:
# print(generate_lorem(2, 3))  # 2 paragraphs, 3 sentences each
# print(generate_words(30))     # 30 words

Ruby

Ruby 提供优雅的文本生成方法：

# Lorem Ipsum Generator in Ruby
LOREM_SENTENCES = [
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
  "Duis aute irure dolor in reprehenderit in voluptate velit esse.",
  "Excepteur sint occaecat cupidatat non proident, sunt in culpa.",
  "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.",
  "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.",
  "At vero eos et accusamus et iusto odio dignissimos ducimus.",
].freeze

def generate_lorem(paragraphs: 3, sentences_per_para: 4)
  paragraphs.times.map do |p|
    sents = LOREM_SENTENCES.sample(sentences_per_para)
    sents[0] = LOREM_SENTENCES[0] if p.zero?
    sents.join(" ")
  end.join("\n\n")
end

def generate_words(count)
  words = LOREM_SENTENCES.join(" ").split(/\s+/)
  count.times.map { |i| words[i % words.length] }.join(" ")
end

# Using the faker gem:
# require 'faker'
# Faker::Lorem.paragraphs(number: 3).join("\n\n")
# Faker::Lorem.sentences(number: 5).join(" ")
# Faker::Lorem.words(number: 50).join(" ")

# Usage:
# puts generate_lorem(paragraphs: 2, sentences_per_para: 3)
# puts generate_words(25)

跳过代码，直接在线生成 Lorem Ipsum →

5. Lorem Ipsum 替代方案：有趣的主题占位文本

虽然 Lorem Ipsum 是经典选择，但存在数十种创意替代方案。这些主题生成器为你的原型增添个性。

6. 使用占位文本的最佳实践

有效使用占位文本不仅仅是到处粘贴 Lorem Ipsum。遵循这些最佳实践来充分利用虚拟文本。

匹配内容长度

使用与预期真实内容长度匹配的占位文本。如果你的博客文章是 500-800 字，就生成那么多的 Lorem Ipsum。长度不匹配会导致设计决策在使用真实内容时失效。

测试内容层次结构

为标题、副标题、正文和说明文字生成不同长度的 Lorem Ipsum。这可以测试你的排版层次结构，确保视觉权重在内容级别之间正确分配。

测试边缘情况

生成非常短的内容（1-2 个词）和非常长的内容（多段落）来压力测试你的布局。检查极端内容长度下的溢出、截断行为和响应断点。

发布前务必替换

将 Lorem Ipsum 发布到生产环境是尴尬和不专业的。在构建管道或 QA 检查清单中添加占位文本检测。每次发布前搜索"Lorem ipsum"。

与真实内容混合

尽可能使用真实标题配合 Lorem Ipsum 正文的混合方法。这种方法让审阅者了解最终产品的同时保持对布局决策的关注。

记录占位符使用

在你的设计系统或组件库中，记录 Lorem Ipsum 用作默认值的位置以及应该用什么内容替换它。

7. 设计工具中的 Lorem Ipsum

现代设计工具内置或通过插件支持 Lorem Ipsum，简化了占位文本工作流程。

Figma

Figma 通过社区插件中的"Lorem Ipsum"插件提供支持。选择文本图层，运行插件，选择要生成多少段落、句子或单词。

Sketch

Sketch 包含内置文本生成功能。选择文本图层，转到 Edit > Insert > Lorem Ipsum 来填充占位文本。

Adobe XD

Adobe XD 通过内置"重复网格"功能和插件管理器中的"Lorem Ipsum"插件支持 Lorem Ipsum 生成。

Canva

Canva 没有内置 Lorem Ipsum 生成器，但可以从在线生成器复制粘贴占位文本。

使用我们的在线生成器快速获取 Lorem Ipsum →

8. 占位文本的可访问性考虑

占位文本对可访问性有实际影响，设计师和开发者必须了解这些。

屏幕阅读器影响

屏幕阅读器会向视觉障碍用户朗读 Lorem Ipsum。在用户测试或可访问性审核期间，这会造成困惑和沮丧的体验。始终使用真实内容进行可访问性测试。

颜色对比度测试

测试 WCAG 合规的颜色对比度时，使用占位文本作为正文替代。重要的是字体大小、粗细和颜色是最终值。实际文字不会影响对比度计算。

ARIA 标签和 Alt 文本

永远不要在 ARIA 标签、alt 文本、按钮标签或表单标签中使用 Lorem Ipsum。这些可访问性属性必须包含描述元素用途的有意义文本。

语言声明

如果页面大量使用 Lorem Ipsum，屏幕阅读器可能会尝试使用英语音素发音拉丁文本，产生无意义的声音。对于生产站点，确保 lang 属性与实际内容语言匹配。

9. 何时不应使用 Lorem Ipsum

尽管 Lorem Ipsum 很有用，但并不总是正确的选择。以下是应避免使用占位文本而应使用真实内容的场景。

可用性测试

如果你正在对真实用户进行可用性测试，始终使用逼真的内容。参与者需要理解他们所阅读的内容才能提供有意义的反馈。

内容驱动设计

对于内容是主要特征的设计（新闻站点、文档、教育平台），内容结构驱动布局。使用 Lorem Ipsum 可能导致设计在使用真实文章时失效。

表单设计和验证

表单需要逼真的输入示例来正确测试验证、错误消息和输入格式。使用 Faker.js 等工具的真实姓名、邮箱、电话和地址。

数据密集型界面

仪表板、表格、图表和数据可视化需要逼真的数字、日期和指标。Lorem Ipsum 无法告诉你 15 列表格或财务仪表板使用真实数据时的样子。

微文案和 UX 写作

按钮标签、错误消息、成功通知、工具提示和空状态从一开始就需要真实的微文案。这些小文本元素对用户体验有巨大影响。

客户演示

向客户展示设计时，尽可能使用真实内容或逼真的近似值。客户通常很难想象 Lorem Ipsum 的最终产品效果。

10. 生成逼真的占位数据 vs Lorem Ipsum

虽然 Lorem Ipsum 非常适合段落级文本，但现代 UI 开发通常需要结构化的占位数据。以下是如何在两者之间选择。

Faker.js 入门

Faker.js 是最流行的逼真假数据生成库。它支持姓名、地址、电话号码、邮箱、日期、图片、商务数据等，覆盖 50 多个地区。

// Faker.js example (npm install @faker-js/faker)
import { faker } from '@faker-js/faker';

// Generate realistic user data
const user = {
  name: faker.person.fullName(),        // "John Smith"
  email: faker.internet.email(),         // "john.smith@example.com"
  avatar: faker.image.avatar(),          // URL to avatar image
  address: faker.location.streetAddress(), // "123 Main St"
  phone: faker.phone.number(),           // "(555) 123-4567"
  company: faker.company.name(),         // "Acme Corp"
  jobTitle: faker.person.jobTitle(),     // "Senior Developer"
};

// Generate Lorem Ipsum with Faker
const text = faker.lorem.paragraphs(3);  // 3 paragraphs
const words = faker.lorem.words(50);     // 50 words
const sentences = faker.lorem.sentences(5); // 5 sentences

// Combine for a realistic blog post mock
const blogPost = {
  title: faker.lorem.sentence(),
  author: faker.person.fullName(),
  date: faker.date.recent().toISOString(),
  body: faker.lorem.paragraphs(5),
  tags: faker.lorem.words(4).split(' '),
  readingTime: Math.ceil(faker.lorem.paragraphs(5).split(/\s+/).length / 238),
};

结合两种方法

最好的原型将 Lorem Ipsum 用于长文本内容，将 Faker.js 用于结构化数据。将 Lorem Ipsum 用于博客文章、评论和描述，将 Faker.js 用于用户档案、产品目录和交易历史。

另请参阅：word counter

常见问题