使用 CSS 的首字母控制 Dropbox

風格拖吊帽的美術設計至今已有數百年之久,甚至數千年來。用於列印樣式,用於表示記錄中可以看到新章節或章節的開頭。然而在數位時代,時尚潮流一直是個問題。從來沒有「純淨」設定樣式

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

但接著,對於「浮點值」這類屬性 才能計算第一個字母的大小

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 屬性可讓您進一步控制這個投射端點樣式。這個函式會採用兩個以空格分隔的值:

p::first-letter {
  initial-letter: 3.5 3;
}
  • 第一個引數定義字母大小及所涵蓋的行數。讓字母放大,但長寬比維持不變。您無法使用負值,但可以使用小數值。
  • 第二個引數定義字母接收器。這可以視為字母位置的偏移值。第二個為選用值,且不得為負數。如果沒有顯示,則會假設字母大小的值已降至最接近的整數。這等同於使用「拖放」關鍵字。接收器也接受其他關鍵字值「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 更精準地控制投籃板樣式!您是否會在字體排版中加入投射帽?該如何設計這些風格?歡迎告訴我們!