那么 Lorem Ipsum 到底是什么?它是一段故意没有意义、被打乱过的伪拉丁文,设计师在真正的文案还没写出来之前,把它填进版面里。目的是用「长得像文本的文本」填满空间,让评审者去判断字体排印、间距和结构,而不是被卷进阅读和修改文案的泥潭。它读起来什么实质内容都没有,这正是它该干的活。现在就需要一段?Lorem Ipsum 生成器能在你的浏览器里一键生成。
但「它是什么」只是开始。本指南还会讲清这段文字真正的源头(一段公元前 45 年西塞罗的真实文段)、它为何比敲「asdf asdf」更管用、如何在几乎任何地方生成它(你的代码编辑器、Word、faker 库、Figma,甚至纯 CSS),它有哪些替代方案,以及大多数文章避而不谈的一个陷阱:当你的版面要承载一种非西欧语言时,Lorem Ipsum 会悄悄地骗你。
Lorem Ipsum 是什么?
Lorem Ipsum 是占位文本(placeholder text):一种被打乱过、没有意义的类拉丁文字,用来在真正内容写出来之前填充设计。它不是你为了塞满输入框随手乱敲的字符。它有一种刻意营造、自然贴切的形态:长短不一的单词、长度变化的句子、偶尔出现的逗号,所以一段占位文本在换行、断字和排版时,表现得很像真正的散文。价值就在这里。眼睛看到一段可信的文本块,于是去评估版面,而不是评估内容。
人人都认得的那句是经典开头:Lorem ipsum dolor sit amet, consectetur adipiscing elit。人们以为它是真正的拉丁文。其实不完全是。第一个词就露了馅,拉丁文里根本没有 lorem 这个词。它是 dolorem(意为「痛苦」)的尾巴,把开头那个音节砍掉了。所以全世界最有名的这段占位文本,第一个词竟是一个更长的、关于苦难之词的残片。一句话概括 lorem ipsum 含义:被破坏过的拉丁文,故意弄残,好让没人误以为它是真内容。
这种刻意的「残缺」很重要。如果填充文字读起来是真实、连贯的语言,评审者就会开始读它,然后开始改它,于是设计评审就变成了文案评审。Lorem Ipsum 落在一个有用的区间:结构上足够像散文,能在页面上正常表现;意义上又足够空洞,没人会忍不住真去读它。
Lorem Ipsum 从何而来?
lorem ipsum 的由来比大多数人以为的要具体得多,而网上流传的简短说法(「不过是些随机拉丁文罢了」)是错的。这段文字源自一份真实的古典文献,后来被肢解,再经两次设计技术的更替,变得无处不在。
西塞罗的《论善恶之极》(公元前 45 年)
源头是 De Finibus Bonorum et Malorum——《论善恶之极》——一部西塞罗于公元前 45 年写下的道德哲学著作。第 1.10.32 和 1.10.33 节探讨快乐与痛苦,其中一段以 Neque porro quisquam est qui dolorem ipsum quia dolor sit amet…(「也没有任何人会因为痛苦本身就是痛苦而去爱它……」)开头。把 dolorem 砍成 lorem,打乱后面的词,删掉一些、加上另一些,你就得到了我们熟知的填充文字。那个著名的开头,是一句关于「为何没人为痛苦本身去寻求痛苦」的真实句子被破坏后的产物。
所以 Lorem Ipsum 并非凭空捏造的胡话。它是一段两千年前的哲学文本,被精准地剜去了意义。
Letraset 与 1960 年代
拉丁文段落不会自己变成设计行业的默认选项。这一步发生在 1960 年代,靠的是 Letraset:一家生产干式转印字体贴纸的公司,做的是平面设计师在数字字体出现之前用的那种摩擦转印字体。Letraset 把 Lorem Ipsum 文段印在它的贴纸和样本资料上,把现成的中性填充文字送到了一线设计师手中。于是它成了你需要「还不是词的词」时随手就能取用的文本。
PageMaker 与桌面排版(1980 年代)
第二步是软件。1980 年代,Aldus 推出了 PageMaker(这款应用基本上开创了桌面排版),并把 Lorem Ipsum 作为内置示例文本捆绑其中。这把填充文字从印刷样本贴纸搬到了屏幕上,搬进了每个在电脑上排版的人的默认工作流。从那以后它扩散到了各款页面排版应用、各套网站模板、各种现代设计工具。如今 InDesign、Figma 以及其余工具都能用一条命令把 Lorem Ipsum 放进一个框里,而这条链子一路追溯回去,正是一个谈论痛苦的罗马人。
设计师与开发者为何使用占位文本
支持使用占位文本(placeholder text)的理由归结为一个想法:把设计问题和内容问题分开,这样你就能一次只解决一个。当你在决定栏宽、行长、行距,以及一张卡片的文字会在第几行换到第三行时,真实文案是个干扰。评审者读到标题,对措辞不满,于是你们开始争论一个句子,而不是网格。
那么具体来说,设计师为何使用 Lorem Ipsum,而不是随便什么填充物?因为它的统计形态很关键。这些词的长度分布很真实,句子也像真实句子那样有变化。一段 Lorem Ipsum 会按真实方式换行、断字,并堆叠出一个真实的行数。你用 Lorem 审定的版面,会非常接近你用等长真实文本得到的版面。
把它和那些偷懒的替代方案对比一下。敲 text text text text,每个词长度都一样,于是换行落点呈现出整齐划一的假象,掩盖了真实文案的实际流动方式。乱敲 asdfasdf jkl;jkl;,你得到的是不自然的字母形状,且完全没有词边界。两者都歪曲了你想要评估的东西。Lorem Ipsum 看起来像语言却不是语言,对这件事来说刚好合适。
还有一项社交层面的好处。Lorem Ipsum 是一种公认的信号。当客户或同事看到 Lorem ipsum dolor sit amet 时,他们会把它读作「这是有意为之的占位,真正的文案在路上」,于是他们不会慌张地以为页面坏了,也不会去校对一堆打乱的拉丁文。评审里这种共识很省事。
如何在任何地方生成 Lorem Ipsum
关于这个话题,大多数文章止步于「从某个网站粘贴过来」。这低估了生成 Lorem Ipsum 真正能派上用场的场景之多。下面是完整的工具箱,从一个浏览器标签页到一段构建脚本。
在线生成器
最快且控制力最强的途径是一个专门的网页工具。Lorem Ipsum 生成器打开时框里已经有三段文字,页面一加载你就能复制填充文字。从那里你选择一个单位(段落、句子、单词、列表项,或者一个精确的字节数),设定数量,再选择输出格式:纯文本、用 <p> 和 <ul><li> 包裹的 HTML、Markdown,或一个 JSON 数组。字节单位尤其好用:为一条推文字段精确填 280 字节,或为一个 varchar(255) 列填 255 字节,并截到最后一个字符为止。
在你的编辑器里:VS Code 与 Emmet
如果你写 HTML,你已经内置了一个生成器。Emmet 随 VS Code 捆绑、且大多数编辑器都支持,会在你于 HTML 文件中按 Tab 时,把 lorem 缩写展开为填充文字。加上一个数字来控制单词数:
lorem
<!-- expands to ~30 words of Lorem Ipsum -->
lorem30
<!-- exactly 30 words -->
p*3>lorem20
<!-- three <p> elements, each with 20 words of Lorem Ipsum -->
最后那个是值得记住的诀窍:把 lorem 与 Emmet 的乘法和嵌套结合起来,你就能在不离开键盘的情况下生成带完整标记的填充文字。JetBrains 系列 IDE(WebStorm、IntelliJ)也搭载了同样的 Emmet 支持,所以这些缩写在那里同样可用。
在 Microsoft Word 里
Word 有一个比网络还早的隐藏生成器。在一个空行上输入下面这行并按回车:
=lorem()
它会放进好几段 Lorem Ipsum。你可以用两个参数控制数量——段落数,以及每段的句子数:
=lorem(3,5)
这会生成 3 段、每段 5 句。如果你更想要真实、可读的英文填充文字(也就是真正的 Word 帮助文本,而非拉丁文),就按同样的方式用 =rand() 和 =rand(3,5)。当你需要向看不懂拉丁文、会被它弄糊涂的非技术受众演示时,这很方便。
在代码里:faker.js
当你需要在程序内部生成填充文字(填充数据库、构建测试夹具、模拟 API),一个 faker 库胜过复制粘贴。现代且仍在维护的包是 @faker-js/faker:
import { faker } from '@faker-js/faker';
// 一句话、一段、三段
const sentence = faker.lorem.sentence();
const paragraph = faker.lorem.paragraph();
const article = faker.lorem.paragraphs(3);
// 可复现的输出:先给生成器设定种子
faker.seed(42);
const fixed = faker.lorem.paragraphs(3); // 每次运行都是同样的文本
设定种子对测试很关键。faker.seed(42) 让输出具有确定性,快照测试就不会仅仅因为两次运行之间填充文字变了而出现不稳定的失败。faker 还能生成姓名、邮箱、地址和结构化记录,你可以填充出一份真实的夹具,再把它直接写到磁盘。如果你把这份夹具存为 JSON,把它过一遍 JSON 格式化工具,提交的文件在 diff 里就清晰可读。
在设计工具里:Figma 与 InDesign
设计师很少需要另开一个标签页。在 Figma 里,「Lorem ipsum」插件(以及 Content Reel)能按命令把占位文案填进选中的文本图层。在 InDesign 里,选中一个文本框,选择 文字 → 用占位文本填充,即可把 Lorem Ipsum 灌入整篇文稿——在原稿到位之前评估一个多栏长条排版时很有用。
在 CSS 里
对于纯视觉原型,你可以用生成内容注入填充文字,无需改动标记:
.skeleton::after {
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
}
这一招要节制使用。用 CSS 设定的内容不是真正的文档文本,屏幕阅读器对它的处理不一致,而且很容易忘记它的存在。它适合用一次就丢的原型或一次样式实验;它不能替代真实模板里的占位内容。
Lorem Ipsum 的变体与替代方案
经典 Lorem Ipsum 是默认选择,但它并非唯一选项,有时它甚至是错误的选项。这些 lorem ipsum 替代方案可归为三类,各自适合不同的活儿。
主题化 Ipsum(培根、文青、猫咪)
主题化生成器把拉丁文换成搞笑词汇:Bacon Ipsum(「bacon ipsum dolor amet ribeye…」)、Hipster Ipsum、Cat Ipsum 以及其余几十种。它们在一种情况下确实有用:一次随意的内部评审,一种可识别、略带幽默的填充文字能让团队保持投入,并传递出「绝对不是最终版」的信号。风险恰恰是 Lorem 长处的反面:主题化填充文字是可读的,人们会开始读它,而在面对客户的场合,它可能显得不够严肃。拿它来调动气氛可以,别拿它做版面决策。
真实数据 faker(faker、Mockaroo)
当占位内容需要的是结构而非散文时,去找一个真实数据 faker。Lorem Ipsum 给你的是成块的假文本;而像 @faker-js/faker 和 Mockaroo 这样的工具给你的是假记录:姓名、邮箱、价格、日期、地址,其形态贴合你真实的数据模型。对于填充数据库、构建 API 模拟,或在原型里填一张用户表,结构化的假数据远比十段一模一样的拉丁文诚实得多。一行带着貌似真实的姓名和邮箱的用户记录,比 Lorem ipsum dolor 更能告诉你关于版面的信息。
内容优先的设计
对 Lorem Ipsum 最尖锐的批评来自「内容优先」阵营,值得认真对待。这个论点是:真实内容有长度、有语气、有边界情况,还有占位文本掩盖掉的那些别扭的真相。一张定价表配上三段整洁的 Lorem 简介看起来很清爽,可一旦某个套餐的真实描述比其他套餐长上三倍,它就散架了。一张围绕 Lorem ipsum dolor sit amet 搭建的个人资料卡,碰上一个有 40 个字符姓名、却没有简介的真实用户时就会出问题。用真实内容(最好是货真价实的那种)来做设计,能尽早暴露这些问题,趁它们还便宜的时候修掉。实用的结论不是「永远别用 Lorem」,而是用 Lorem 把结构搭出大致样子,然后在定稿之前用真实内容做压力测试。
i18n 占位陷阱
下面是大多数指南略过、却最可能让你栽跟头的部分。Lorem Ipsum 是拉丁文。它的单词长度、字母频率和间距近似于西欧语言:英语、法语、西班牙语及它们的亲属。一旦你的版面要渲染一种不在这个语系里的语言,Lorem Ipsum 就不再预测现实,而是开始骗你了。
有三种失效模式反复出现:
- CJK 文字(中文、日文、韩文)。 这些语言通常词与词之间不用空格,换行规则完全不同,而且每个字符占据一个大致呈方形、定宽的字格。一个用 Lorem Ipsum 看起来很均衡的栏,填入中文后换行方式可能完全不同——而且行数也不同。每行的字符密度跟拉丁文毫无相似之处。
- RTL 文字(阿拉伯语、希伯来语)。 这些语言从右往左读,这会翻转整个阅读方向、对齐方式以及 UI 控件的位置。对于你的版面是否正确镜像,Lorem Ipsum 给不出一丝信号。你必须用真正的 RTL 示例文本来测试。
- 德语及其他富含复合词的语言。 德语会拼出很长的复合名词(Geschwindigkeitsbegrenzung、Rechtsschutzversicherung),它们的断行方式跟 Lorem 那些整齐的 5 到 8 个字母的单词不一样。一个能舒舒服服容纳 Lorem Ipsum 的窄栏,一旦真正的德语词落进去,就可能溢出或被迫做难看的断字。
修法很直接:别指望 Lorem Ipsum 来验证一个本地化版面。给每种语言环境填上那种语言的示例文本,实打实地检查换行、行数和控件对齐。当你要把一个槽位的尺寸对齐到一个真实世界的限制时(meta 描述、一条推文、一条短信),就去匹配实际的字符预算;我们的 各平台字符限制指南列出了具体数字,而 字数统计能让你在围绕一段示例做设计之前,确认它落在范围内。
这也正是「字节 vs 字符」之分咬人的地方,由此直接引出下面的「错误」一节。
常见错误,以及何时不该用 Lorem Ipsum
Lorem Ipsum 是开发工具,不是上线材料。大多数麻烦都源于忘了这条界线。几种失误值得提防。
把它发布到生产环境。 这是最严重的一条。一个会被索引的线上页面如果还留着 Lorem Ipsum,就没有真实内容可供排名,对任何找到它的访客来说都像是坏掉了,还可能被判定为内容稀薄或未完成。这几乎从来不是故意的,多半是一个上了线的暂存模板、一处被遗忘的页脚,或是一个没人替换的 CMS 默认值。防御手段很机械:每次部署前,在你的整个项目里搜索(不区分大小写)lorem ipsum,确认零命中。把它放进你的发布前检查清单,就排在死链检查旁边。
忘了无障碍。 屏幕阅读器不会跳过 Lorem Ipsum,它会把这堆打乱的拉丁文一个词一个词地念出来给使用者听。这在演示中令人困惑,而一旦占位文本进了生产环境,就是货真价实的不友好了。如果你要向一位使用辅助技术的相关方展示成果,真实的、或主题化但可读的填充文字,都比一整面墙的拉丁文更体贴。
让数量与槽位不匹配。 给一行标题填进三段文字,或给一篇长文正文只填一句话,都是在错误的长度上测试版面。它在效果图里看着没问题,等真实内容到位就崩了。让单位和数量匹配槽位实际要容纳的东西——标题用六个词,不是六十个。
以为字节永远等于字符。 经典 Lorem Ipsum 是纯 ASCII,一个字符恰好是一个字节,人们很容易开始相信这是一条普适规则。其实不是。换上一个带重音的字母、一个表情符号,或任何非拉丁文字,单个字符就可能是两个、三个或四个字节。一个能轻松容纳 255 个 ASCII Lorem 字符的 varchar(255) 字节列,在真实用户输入 255 个字符的 café 北京 😀 时就会溢出。用字段实际要存储的字符集来测试字节限制;各平台字符限制指南细讲了人们究竟在哪里栽跟头。(当你在清洗标识符时,同样要留意字节与字符之分;命名约定指南覆盖了键名和 slug 的相关内容。)
把生成的文本当成已保存的资源。 大多数生成器什么都不存——刷新页面,输出就没了。如果你需要某一段特定内容,就复制或下载下来。对于可复用的测试夹具,把 JSON 输出保存进你的仓库,让填充文字与依赖它的测试一起纳入版本控制,而不是每次运行都重新(且不同地)生成一份。
常见问题
Lorem Ipsum 是什么意思?
Lorem Ipsum 故意什么意思都没有——它是被打乱、被破坏过的拉丁文,没有连贯的含义。它源自西塞罗一段关于痛苦与快乐的文字,但那些词被剪裁、重排、改动,直到不再构成可读的拉丁文。第一个词 lorem,是 dolorem(「痛苦」)去掉开头音节后的残片。
Lorem Ipsum 是真正的拉丁文吗?
不是。它基于真正的拉丁文——西塞罗《论善恶之极》(De Finibus Bonorum et Malorum)中的一段——但它被刻意肢解过。词被截断、重排、删除和编造,所以它读起来是带拉丁味的胡话,而非可翻译的文本。Lorem 本身就不是一个真正的拉丁词。
Lorem Ipsum 从何而来?
Lorem Ipsum 出自西塞罗公元前 45 年的一部文本《论善恶之极》(De Finibus Bonorum et Malorum)。它通过 Letraset 公司进入设计领域,该公司在 1960 年代把它印在干式转印字体贴纸上,又在 1980 年代走向主流——当时 Aldus 把它作为示例文本捆绑进 PageMaker,这是第一款桌面排版应用。
设计师为何用 Lorem Ipsum 而不用真实文本?
设计师使用 Lorem Ipsum,是为了让评审者去判断版面、字体排印和间距,而不是去读和改文案。它真实的单词与句子长度让它像真正的散文那样换行和断行,不像 text text text 或 asdf;同时又足够空洞,没人会忍不住真去读它。
我如何在 VS Code 或 Word 里生成 Lorem Ipsum?
在 VS Code 里,于 HTML 文件中输入 Emmet 缩写 lorem(或用 lorem30 指定精确单词数)并按 Tab。在 Word 里,于一个空行上输入 =lorem() 并按回车,或用 =lorem(3,5) 生成 3 段、每段 5 句。两者都能离线工作,无需插件。
Lorem Ipsum 最好的替代方案有哪些?
主要的替代方案有:用于随意评审的主题化生成器(Bacon、Hipster、Cat Ipsum);当你需要结构化的假记录而非散文时,用 @faker-js/faker 或 Mockaroo 这样的真实数据 faker;以及真实内容本身——当你想压力测试真实的长度与语气在版面里的表现时。
在线上页面留着 Lorem Ipsum 对 SEO 不好吗?
不好。一个满是 Lorem Ipsum、会被索引的线上页面,没有真实内容可供排名,还可能被当作内容稀薄或未完成,浪费抓取预算并让访客困惑。拉丁文本身没有直接惩罚,但页面无法获得表现。每次部署前,在你的项目里搜索 lorem ipsum。
Lorem Ipsum 适用于非英语或 CJK 版面吗?
不可靠。Lorem Ipsum 只近似西欧语言。CJK 文字的换行和间距完全不同,阿拉伯语之类的 RTL 语言会翻转整个方向,德语复合词会让窄栏溢出。请用目标语言的真实示例文本来验证本地化版面,而不是用 Lorem。
小结
Lorem Ipsum 是一段两千年前的西塞罗文段,被剥去了意义,靠 Letraset 和 PageMaker 续命,如今已嵌入你接触的每一个设计工具。它配得上自己的位置,因为它看起来像语言却不是语言:拿来评判版面很合适,当作上线内容却毫无用处。需要把结构搭出大致样子时取用它,在你恰好工作的任何地方生成它,然后在任何东西上线之前,把它替换为真实、且符合语言环境的内容。现在就需要一段的话,Lorem Ipsum 生成器里已经有一段。