復古電視字幕

2026-07-14 · 305 字 · <1 分鐘

文字本身的四個特徵

顏色：不用純黃 #ffff00，改用偏金黃色 #ffd21a。

描邊：粗黑色描邊，兩種寫法見下方比較。

字體：避開思源黑體、Noto Sans TC 這類幾何感字型，改用 DFKai-SB、BiauKai、標楷體。

質感：輕微 blur 加 scaleX 抖動，模擬類比訊號暈染感。

兩種描邊做法的比較

第一種：八個方向的 text-shadow 疊黑色。

.retro-subtitle {
  color: #ffd21a;
  text-shadow:
    -3px -3px 0 #111, 0 -3px 0 #111, 3px -3px 0 #111,
    -3px  0   0 #111,                3px  0   0 #111,
    -3px  3px 0 #111, 0  3px 0 #111, 3px  3px 0 #111;
}

邊緣不規則，程式碼較長，八組座標要手動排。

第二種：-webkit-text-stroke 搭配 paint-order: stroke fill，一行畫出等寬描邊，再補一層陰影。

.retro-subtitle {
  color: #ffd21a;
  -webkit-text-stroke: 3px #111;
  paint-order: stroke fill;
  text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.5);
}

差異：八方向陰影版黑邊粗細不一、稜角分明；stroke 版黑邊等寬、線條乾淨。

本篇為諮詢 AI 整理的筆記。