使用 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;
}

導入 lh 等新 CSS 單位，可以減輕這方面的痛苦。但這些功能的支援範圍也有限 (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

initial-letter 屬性可讓您更精確地控管這個首字母上方的裝飾字樣式。這個函式會使用兩個以空格分隔的值：

p::first-letter {
  initial-letter: 3.5 3;
}
  • 第一個引數會定義字母的大小和所占行數。信件會在維持顯示比例的情況下放大。您無法使用負值，但可以使用小數值。
  • 第二個引數會定義字母匯出端。您可以將這項資訊視為字母所在位置的偏移量。第二個值為選用，且不得為負值。如果未提供，系統會假設字母大小的值為最接近的整數。這相當於使用「drop」關鍵字。接收器也接受另一個關鍵字值「raise」，這相當於接收器為 1。

請參閱這個示範，瞭解如何變更值，以及對首字母上浮圖樣式造成的影響。

結合 ::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 更精細地控制首字母縮寫樣式了！您是否想在字體排版中加入首字大寫？您會如何設定樣式？歡迎告訴我們！