Lorem Ipsum 占位文字完整指南：歷史、用途、變體、線上產生器

寫給：所有打開 Figma 看到「Lorem ipsum dolor sit amet」卻不知道這啥意思的設計師、做 wireframe 的 PM，以及好奇為什麼網頁範本永遠用這段拉丁文的所有人。

「Lorem ipsum dolor sit amet, consectetur adipiscing elit...」這串看似亂碼的拉丁文，背後其實有 500 年歷史。它是平面設計師、網頁工程師、Figma / Sketch 範本中無所不在的「占位文字」（placeholder text），用來在內容還沒準備好時讓版面看起來有東西。本文 11 分鐘把 Lorem Ipsum 的起源、變體、現代用法，以及如何用 SuperTools 線上工具一鍵生成各種長度與語言的占位文字一次講清楚。

1. Lorem Ipsum 是什麼

Lorem Ipsum 是一段故意打亂的拉丁文，主要用途是在排版設計時填充版面，讓設計師可以專注在視覺效果而非內容。它的源頭是西塞羅（Cicero）於公元前 45 年寫的《De finibus bonorum et malorum》（論善與惡的目的），但經過大量改編使其失去原意——不是因為拉丁文太難，而是要刻意避免讀者注意內容。

最常見的版本：

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
nisi ut aliquip ex ea commodo consequat.

1.1 為什麼不用真的文字？

如果用真實內容（如新聞報導），讀者會被內容吸引、開始品評文筆，而非評估設計。Lorem Ipsum 因為：

看起來像文字（有單字長短分布、有標點）
沒有實際意義（讀者大腦自動忽略）
字母分布接近英文（適合測試字型）

成為設計界事實標準。

1.2 500 年歷史

1500 年代：印刷術出現後，排字工人需要展示字體樣本。某位匿名印刷工從西塞羅文章拼湊出 Lorem Ipsum
1960 年代：Letraset 公司把 Lorem Ipsum 印在轉印貼紙上販售
1980 年代：Aldus PageMaker 桌面排版軟體把 Lorem Ipsum 設為預設範例
2000 年代：lipsum.com 上線成為線上產生器代表
2020 年代：各種變體百花齊放（中文、emoji、企業屁話、貓咪喵喵）

2. 5 個核心觀念

2.1 標準 Lorem Ipsum 結構

正版 Lorem Ipsum 應從這 6 字開頭：Lorem ipsum dolor sit amet。後續可以是固定段落、也可以隨機生成。隨機版常見變化：

段落數：1 段、3 段、5 段
每段句數：3-5 句
每句詞數：8-15 詞
總長度：以「字數」、「段數」、「字元數」三種計

[1 段 / 50 字 / 中等長度]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua...

2.2 詞彙池

主流 Lorem Ipsum 產生器有約 200 個拉丁詞的「池」，隨機抽取組合。常見詞：

lorem, ipsum, dolor, sit, amet, consectetur, adipiscing, elit,
sed, do, eiusmod, tempor, incididunt, ut, labore, et, dolore,
magna, aliqua, enim, ad, minim, veniam, quis, nostrud,
exercitation, ullamco, laboris, nisi, aliquip, ex, ea, commodo,
consequat, duis, aute, irure, in, reprehenderit, voluptate,
velit, esse, cillum, eu, fugiat, nulla, pariatur, excepteur,
sint, occaecat, cupidatat, non, proident, sunt, culpa, qui,
officia, deserunt, mollit, anim, id, est, laborum

組合方式：句首大寫，句末加 .，30% 機率插逗號。

2.3 變體：地域化與主題化

中文亂數：因為中文沒有空格切分，常見做法是抽取古文片段（《論語》、《道德經》、《詩經》）：

道可道，非常道。名可名，非常名。無名天地之始，
有名萬物之母。故常無欲，以觀其妙；常有欲，以觀其徼。

或抽取現代假文：

這是一段測試文字。可用來檢視中文版面與字體呈現效果。
排版設計需考慮字距、行高、段落間距等因素。

英文主題版：

Cupcake Ipsum：甜點主題（"Sweet roll lollipop tart..."）
Hipster Ipsum：嬉皮主題（"Cold-pressed kombucha vinyl..."）
Corporate Ipsum：企業屁話（"Synergize disruptive paradigm shifts..."）
Cat Ipsum：貓咪內心戲（"Meow meow knock things off table..."）
Bacon Ipsum：肉類主題

Emoji Ipsum：純 emoji 填充：

🌮🚀⭐🎵🍕 🏖️🦄🎨 🍔🎮🌈

2.4 使用場景

場景	為什麼用 Lorem
Figma / Sketch wireframe	設計師專注版面
網頁範本 demo	客戶看版型不看內容
字型展示	純測試字體
印刷樣本	印刷廠校稿
CMS 系統測試	填空 article 欄位
ML 訓練 dummy data	不用真實資料

2.5 何時不該用 Lorem Ipsum

⚠️ 三個常見坑：

真實上線網站：忘記換成真內容，搜尋引擎索引到 Lorem Ipsum → SEO 災難
A/B test 比對：使用者不會像看真實內容那樣行為
法律文件 / 合約模板：嚴重 → 真實場景一定要用真實文字

歷史上的笑話：2012 年 Wired 雜誌印刷版有頁面誤印 Lorem Ipsum；2020 年 NPM 套件被發現 README 含 Lorem 段落沒刪。

3. 實戰範例

範例 1：HTML 中嵌入 Lorem Ipsum

<article>
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>
    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.
  </p>
</article>

範例 2：Python 程式生成

import random

WORDS = """lorem ipsum dolor sit amet consectetur adipiscing elit sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim
veniam quis nostrud exercitation ullamco laboris nisi aliquip ex ea
commodo consequat""".split()

def lorem(num_words=50, num_sentences=None):
    if num_sentences:
        sentences = []
        for _ in range(num_sentences):
            length = random.randint(6, 15)
            words = random.choices(WORDS, k=length)
            words[0] = words[0].capitalize()
            sentences.append(" ".join(words) + ".")
        return " ".join(sentences)
    words = random.choices(WORDS, k=num_words)
    words[0] = words[0].capitalize()
    return " ".join(words) + "."

print(lorem(num_sentences=3))

範例 3：JavaScript 用 npm faker

import { faker } from "@faker-js/faker";

console.log(faker.lorem.sentence());
console.log(faker.lorem.paragraph());
console.log(faker.lorem.paragraphs(3));
console.log(faker.lorem.words(20));

範例 4：VS Code 一鍵插入

VS Code 內建 Emmet 縮寫：

lorem        Tab → 30 字 Lorem
lorem50      Tab → 50 字
lorem10      Tab → 10 字
lipsum*3     Tab → 3 段

範例 5：CSS 偽元素的 content

.placeholder::after {
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
  color: #999;
  font-style: italic;
}

純設計示意時可用，但無障礙閱讀器會讀到，謹慎使用。

4. 進階技巧

4.1 控制段落結構

import { faker } from "@faker-js/faker";

// 自訂結構：3 段，每段 5-8 句，每句 6-12 詞
function richLorem(paragraphs = 3) {
  return Array.from({length: paragraphs}, () => {
    const sentences = faker.number.int({min: 5, max: 8});
    return Array.from({length: sentences}, () =>
      faker.lorem.sentence(faker.number.int({min: 6, max: 12}))
    ).join(" ");
  }).join("\n\n");
}

4.2 含 Markdown 結構的 Lorem

def lorem_md():
    return f"""
# {lorem(num_words=5)}

## {lorem(num_words=4)}

{lorem(num_sentences=3)}

- {lorem(num_words=5)}
- {lorem(num_words=6)}
- {lorem(num_words=7)}

## {lorem(num_words=4)}

> {lorem(num_sentences=1)}

```python
def hello():
    print("Lorem ipsum")

{lorem(num_sentences=4)} """

### 4.3 種子化（seeded）讓 Lorem 可重現

```python
import random

def seeded_lorem(seed=42, num_words=50):
    rng = random.Random(seed)
    words = rng.choices(WORDS, k=num_words)
    words[0] = words[0].capitalize()
    return " ".join(words) + "."

# 同 seed 永遠相同輸出
print(seeded_lorem(42))
print(seeded_lorem(42))  # 一樣

測試環境用，保證每次跑都相同 dummy 資料。

4.4 中英混合 Lorem

import random

cn_words = ["設計", "排版", "字體", "測試", "範例", "段落", "標題", "內容", "版面", "風格"]

def mixed_lorem(num_words=30, cn_ratio=0.5):
    out = []
    for _ in range(num_words):
        if random.random() < cn_ratio:
            out.append(random.choice(cn_words))
        else:
            out.append(random.choice(WORDS))
    return " ".join(out)

4.5 結構化 dummy 資料

from faker import Faker

fake = Faker("zh_TW")

def fake_article():
    return {
        "title": fake.sentence(nb_words=6),
        "author": fake.name(),
        "date": fake.date(),
        "content": fake.text(max_nb_chars=1000),
        "tags": fake.words(nb=5),
    }

print(fake_article())

Faker 支援多語、多場景（地址、信用卡、電話），比純 Lorem 更實用。

5. 常見錯誤與解法

錯誤 1：忘記移除 Lorem 上線

症狀：網站 article 內容是 Lorem ipsum 一段。根因：開發中設範例、上線前沒換。解法：CI / lint 規則 grep lorem ipsum block deploy；Staging 環境做最終 review。

錯誤 2：SEO 被罰

症狀：Google 索引到 Lorem 內容，排名下降。根因：Lorem 與全球大量網頁重複。解法：上線前掃描所有 page，確認無 Lorem。或對 dev 環境加 <meta name="robots" content="noindex">。

錯誤 3：客戶誤以為是真內容

症狀：客戶看 wireframe demo，問「為什麼網站全英文」。根因：設計師忘了告知。解法：demo 時加註「以下為占位文字，正式內容待提供」。

錯誤 4：字型測試誤用 Lorem

症狀：用 Lorem 測中文字型。根因：Lorem 是拉丁文，無法測中文。解法：中文用「永」字、「國」字、《論語》片段測。

錯誤 5：A/B test 用 Lorem

症狀：用 Lorem 跟真內容比閱讀時間，數據沒意義。根因：使用者不會像看真內容那樣讀 Lorem。解法：A/B test 永遠用真實內容。

6. 用 SuperTools 線上版完成相同任務

不想 npm install 或寫 Python？打開 SuperTools Lorem Ipsum 工具：

單位選擇：詞數 / 句數 / 段數 / 字元數
拉丁 / 中文古文 / 中文現代假文 / Cat Ipsum / Hipster Ipsum 5 種風格
是否從 "Lorem ipsum dolor sit amet" 起頭：toggle
含 HTML 結構：<p> / <h2> / <ul> 包裹
含 Markdown 結構：H 標題 / 列表 / 引用
複製 / 下載：txt / json / html

工具 client-side，不送任何 API。

實際使用流程：

開 supertools.tw/text/lorem
選「3 段」+「中文現代」
點「Generate」
複製貼進 Figma / wireframe

立即使用 SuperTools Lorem Ipsum 工具：https://supertools.tw/text/lorem

7. 其他語言實作

Python（lorem 套件）

# pip install lorem
import lorem
print(lorem.sentence())
print(lorem.paragraph())
print(lorem.text())

JavaScript（faker）

import { faker } from "@faker-js/faker";
faker.lorem.sentence();
faker.lorem.paragraphs(3);

Go

import "github.com/go-loremipsum/loremipsum"
li := loremipsum.New()
li.Sentence()
li.Paragraph()

Rust（lipsum crate）

use lipsum::lipsum;
println!("{}", lipsum(50));

Bash

# Linux
shuf -n 50 /usr/share/dict/words | tr '\n' ' '

# 或用 curl 第三方 API
curl https://baconipsum.com/api/?type=meat-and-filler

8. FAQ

Q1：Lorem ipsum 真的是拉丁文嗎？ 部分是。源自西塞羅文章但經改編，多數現代版本不符合拉丁文法。

Q2：Google 會懲罰用 Lorem 的網站嗎？ 不會直接懲罰，但 Lorem 內容與其他網站高度重複，會被視為 thin content，影響排名。

Q3：手機 app 也可以用嗎？ 可以。Apple iOS Human Interface Guidelines、Google Material Design 範例多用 Lorem。

Q4：是否有版權？ 無。Lorem 是 public domain。

Q5：可以自訂詞彙池嗎？ 可以。多數產生器支援自訂 word list。

9. 實戰案例研究

案例 1：Wired 雜誌 2012 印刷誤刊 Lorem

2012 年 4 月 Wired 印刷版有一頁文章開頭：

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

10 萬本印刷出貨後才發現。事後檢討：

設計師 placeholder 留太晚換
編輯校稿時看到「拉丁文」誤以為是「裝飾性開頭」
印刷廠最終 check 只看版面不看內容

修法（業界普遍）：

CMS 設「published」狀態前自動掃描 lorem ipsum
CI / lint 規則 block deploy
Staging 環境必經 content review

教訓：占位文字必有檢查機制。

案例 2：Bootstrap 範本 SEO 災難

某新創上線官網用知名 Bootstrap 範本，沒換預設 Lorem 內容。Google 收錄後：

大量內容跟全球無數其他 Bootstrap 站重複
被視為 thin content
上線 3 個月仍未排進首頁

修法：全站 Lorem 換成真實品牌文案 + 加產品具體描述。3 個月後關鍵字排名爬到前 20。

教訓：上線網站任何 Lorem 都是 SEO 殺手。

案例 3：用 Faker 產 dummy 資料測試效能

某 SaaS 上線前要測 100 萬 user 的效能。用 Faker 產 realistic dummy：

from faker import Faker
fake = Faker("zh_TW")

users = [
    {
        "name": fake.name(),
        "email": fake.email(),
        "phone": fake.phone_number(),
        "address": fake.address(),
        "registered_at": fake.date_time_between(start_date="-2y"),
    }
    for _ in range(1_000_000)
]

比 Lorem 真實得多，UI 不會空白、搜尋過濾測試符合實際資料分布。後續效能 bug 在測試階段就抓到（中文字串排序成本高於英文）。

教訓：dummy 不只是「填空」，真實感越高測試越有效。

10. 結論 + 延伸閱讀

Lorem Ipsum 是設計師 500 年來的好朋友。理解它的歷史與限制後，你可以選對變體、避開 SEO 陷阱、做出更好的 wireframe。下次要展示版型時，先到 SuperTools 線上工具產一段對應語系的占位文字，並設個提醒——上線前永遠記得換真內容。三條黃金法則：CI 自動掃 Lorem block deploy、SEO 上線禁 Lorem、測試 dummy 改用 Faker 高真實感。