使用 CSS 的首字母控制 Dropbox

Jhey Tompkins
掉落造型帽子的藝術已經在數百年之久了。這會在列印樣式中使用，代表新區段或章節的開頭可透過歷史記錄查看。但在數位時代中，展現時尚風格的向來都是問題。目前沒有任何「乾淨」的解決方案能設定樣式。

CSS initial-letter 資源能讓你事半功倍。

瀏覽器支援

initial-letter 可以在哪裡嘗試？你可以透過 Safari 和 Chrome 110 使用這項服務。在 Safari 中，屬性的前置字元需要 -webkit-。在 Firefox 中發現這個尚未解決的問題。

使用下列工具測試 initial-letter 支援：

@supports (initial-letter: 1 1) { /* Your supported styles */ }

目前的解決方案

目前在 CSS 中，如何調整下滑上限的樣式？

::first-letter 虛擬元素可引領我們採取行動。

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
}

但如果要計算第一個字母的大小，就可能需要使用「float」這類屬性。

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
  float: left;
  line-height: 1;
  margin-right: 0.25rem;
}

引入新的 CSS 單元 (例如 lh) 或許能減輕這個問題。但這些支援有限，但 lh 目前僅支援 Chrome。

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 3lh;
  float: left;
  line-height: 1;
  margin-right: 0.1lh;
}

初始字母簡介

initial-letter 屬性可讓您更精細地控制這個放置上限樣式。會取用兩個以空格分隔的值：

p::first-letter {
  initial-letter: 3.5 3;
}
  • 第一個引數會定義字母大小和占行的行數。字母在維持顯示比例時放大。不可使用負值，但可以使用小數值。
  • 第二個引數定義字母接收器。因此可視為字母所在處的位移。第二個值是選填欄位，不得為負數。如果沒有，則會假設字母大小的值為最接近的整數。這等同於使用關鍵字「下滑」。接收器還接受另一個關鍵字值「raise」，該值相當於 1 支 {0/} 的接收器。

請看這個示範模式，您可以在其中變更值，看看這會對放置上限樣式造成什麼影響。

搭配 ::first-line 運用，就能呈現如下效果：

p::first-line {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.25rem;
}
p::first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: #3b5bdb;
  text-shadow: 0.25rem 0.25rem #be4bdb;
}

或是輸入 border。請注意，以下範例使用「drop」關鍵字 (如果省略，則預設為 3)： css p::first-letter { font-family: "Merriweather", serif; initial-letter: 3.5 drop; font-weight: bold; line-height: 1; margin-right: 1rem; color: #3b5bdb; border: 0.25rem dashed #be4bdb; padding: 0.5rem; border-radius: 5px; }

也許可以新增 background 或一些 box-shadow：

p::first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: var(--surface-1);
  background: #be4bdb;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}

你也可以將背景裁剪為文字：

p::first-letter {
  background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: transparent;
  -webkit-background-clip: text;
  padding: 0.5rem;
}

你有許多可能！

這樣，您就可以使用 initial-letter 更精細地控制放置上限樣式！您是否要在字體排版中新增放置上限？這時該如何設計？歡迎告訴我們！