當涉及到網頁設計時，你的內容的視覺吸引力在吸引和保持你的觀眾的注意力方面起著至關重要的作用。設計的一個方面可以極大地影響你的網站的整體美感和可讀性，那就是文字造型。
文字造型不僅僅是選擇一種字型和字型顏色。它涉及到精心組合各種CSS屬性以達到預期的效果，例如利用文字輪廓來使你的文字具有視覺衝擊力。
在這篇文章中，我們將深入研究使用CSS對文字輪廓進行造型的藝術，並探討它是如何與你可以使用的各種選項一起工作的。
瞭解Web文字
Web文字是顯示在網頁上的文字。字型在網路上顯示文字方面起著至關重要的作用。這些字型本質上是基於向量的圖形，這意味著畫素資料並不限制它們，可以在各種尺寸下呈現，同時保持它們的銳度和清晰度。
字型是基於向量的圖形，它的一個迷人之處在於能夠在單個字元周圍應用筆畫或輪廓。就像在Adobe Illustrator等向量程式中，你可以在形狀周圍畫上一筆，CSS提供了在網路文字上實現同樣效果的方法。
用CSS新增文字輪廓的2種方法
當談到用CSS為你的文字新增輪廓效果時，你可以採用兩種方法。讓我們來探討一下，看看這些方法的弊端以及如何使用它們。
1. 使用text-stroke屬性
text-stroke 是一個CSS屬性，你可以用它來為你的文字新增一個輪廓。它允許你指定輪廓的width 和 color。這個屬性只被基於WebKit的瀏覽器支援，為了使用它，你必須新增 -webkit- 字首。
例如，讓我們為 h1 標題文字–“Welcome to WBOLT.COM” 新增輪廓：
<h1>Welcome to WBOLT.COM</h1>
這就是帶有 -webkit- 字首的 text-stroke 屬性的使用方法：
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}
-webkit-text-stroke-width 和 -webkit-text-stroke-color 分別指定筆畫的 width 和 color。它將 width 設為 3px ， color 設為 black。
用text-stroke屬性新增輪廓。
上面這兩個屬性可以和速記屬性 -webkit-text-stroke 結合起來，它同時指定了筆畫的 color 和 width。
h1 {
-webkit-text-stroke: 3px black;
}
這將得到相同的輸出。
支援text-stroke屬性
根據caniuse的說法，Internet Explorer瀏覽器不支援 text-stroke 屬性。
對文字描邊屬性的支援。
如果你使用 text-stroke 屬性來設定文字的輪廓，而使用者使用的是不支援的瀏覽器，那麼如果文字的顏色與背景顏色相匹配，那麼這些文字可能就不可見。
為了解決這個問題，你可以使用 -webkit-text-fill-color 屬性為文字設定一個 color ，並使用 color 屬性設定一個後備顏色：
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke: 3px black;
}
增加對不支援的瀏覽器的支援。
當一個瀏覽器不支援 text-stroke 屬性時，它使用 color 屬性設定的顏色。
當瀏覽器不支援時，可以回退。
另一個選擇是在新增樣式之前確認瀏覽器是否支援 -webkit-text-stroke 屬性。
@supports (-webkit-text-stroke: 3px black) {
h1 {
-webkit-text-fill-color: white;
-webkit-text-stroke: 3px black;
}
}
2. 使用text-shadow屬性
如果你不想處理支援差異，你可以使用 text-shadow 屬性，它對所有流行瀏覽器的最新版本都有支援。
對text-shadow屬性的支援。
對於 text-shadow 屬性，我們將使用四個陰影，分別在右上角、左上角、左下角和右下角。
h1 {
color: #fff;
text-shadow:
3px 3px 0 #000,
-3px 3px 0 #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
在這個例子中，我們使用四個陰影來建立一個文字輪廓效果。每個陰影與文字有3個畫素的偏移，顏色被設定為黑色（ #000 ）。這種效果類似於第一種方法產生的效果。
用text-shadow屬性新增輪廓。
通過對文字的所有四個角施加陰影，我們實現了一個輪廓清晰的效果。請隨意調整畫素偏移、陰影顏色或文字顏色，以適應你的具體設計偏好。
這種方法給你帶來了額外的優勢，因為你可以根據適合文字的內容來調整水平和垂直的陰影。你還可以新增一點模糊半徑：
h1 {
color: #fff;
text-shadow:
3px 3px 2px #000,
-3px 3px 2px #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
用文字陰影屬性為輪廓新增模糊。
使用文字陰影的一個限制是，當陰影長度超過1畫素時，你可能會遇到不連續的筆觸效果（如果你與 text-stroke 方法比較，你會看到這一點）。
結合text-stroke和text-shadow屬性
結合text-stroke和text-shadow屬性你可以將這兩個屬性結合起來，以達到一種視覺上的震撼效果，將完美的文字輪廓與微妙的模糊和 text-shadow 屬性所提供的額外效果結合起來。這種組合允許用一種多功能和可定製的方法來增強你的文字的外觀。
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
結合文字描邊和文字陰影來建立一個輪廓。
你也可以不用為每個角落新增單獨的陰影，而用一條線來應用一個總的陰影：
#heading-1{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}
#heading-2{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px red;
}
#heading-3{
color: #333;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}
通過文字描邊和文字陰影實現更多的輪廓例項。
小結
text-stroke 和 text-shadow 屬性都為給你的文字新增輪廓提供了寶貴的選擇。對它們的選擇取決於瀏覽器的相容性、所需的效果以及你的設計所需的控制水平。
評論留言