Original Article: Stroke Text CSS - The Definitive Guide
原始文章:描邊文本CSS-權威指南
在本教程中,我將向您展示如何創建筆觸文本CSS效果。
在進入HTML和CSS代碼之前,如果您只需要創建筆觸文本圖像,請查看本教程並學習如何outline text in Photoshop為文本加輪廓。
或者,如果您沒有Photoshop,則可以使用免費的在線工具MockoFun,該工具甚至具有專門的筆觸文本教程。
使用CSS將筆劃添加到文本 -webkit-text-stroke
例如,讓我們在文本上添加黑色筆觸。我將從一些HTML代碼開始:
<span class="stroke-text">STROKE TEXT</span>
和CSS代碼:
.stroke-text{
-webkit-text-stroke:5px black;
-webkit-text-fill-color:transparent;
}
很簡單,我們使文本透明–儘管這不是必需的,但我只希望文本的輪廓可見,而不是字母的正文。然後,該-webkit-text-stroke
屬性添加一個5px厚的黑色輪廓描邊。您可以更改它以獲得更粗的輪廓文本或更細的輪廓,具體取決於您想要獲得的效果。
好消息:
您也可以使用它在所有基於Webkit的瀏覽器(例如Chrome或Edge)和Firefox上的CSS中描邊文本。
壞消息:
這是一項非標準功能,因此您不能100%依靠。
根據CanIUse.com,並非所有瀏覽器都支持它:此屬性尚未出現在任何W3C規範中。暫時包含在規範中作為text-outline
屬性,但是已刪除。
只是為了向您暗示您可以使用此文本筆觸CSS屬性創建的內容,這是80年代字體文本效果庫中我的Cyber Space文本效果部分。
使用將筆劃添加到文本 text-shadow
在CSS中概述文本的另一種方法是使用陰影。CSS允許通過屬性將多個陰影添加到文本元素text-shadow
。
因此,讓我們在白色文本上添加白色,並為其添加4個紅色陰影。向上,向左,向下和向右偏移4個陰影1px。這是HTML代碼:
<span class="stroke-text">STROKE TEXT</span>
和CSS代碼:
.stroke-text{
color:white;
text-shadow:1px 0 0 red,0 1px 0 red,-1px 0 0 red,0 -1px 0 red;
}
這是正在發生的事情的圖形表示,以及如何使用文本陰影實現CSS文本筆觸效果:
完美,不是嗎?
好吧,不完全是,但是非常好。讓我們指出一些缺點和解決方案。
首先,如果需要修改文本輪廓的粗細或顏色,則需要在多個位置進行更改,這可能很乏味。
CSS為我們提供了一個非常優雅的解決方案,為了方便起見,我經常使用它,即CSS變量。您可以在此處閱讀有關CSS變量的更多信息,但是您需要知道的是,如果您在CSS中必須一遍又一遍地重複值,那麼CSS變量將為您帶來巨大的幫助。
使用CSS變量配置文本筆觸的顏色和粗細
基本上,您可以定義CSS變量,例如:--my-variable:value
。然後,在整個CSS代碼中,如果您需要該值,則只需使用property:var(--my-variable);
因此,像這樣更改上面的CSS代碼:
.stroke-text{
--stroke-color:red;
--stroke-width:1px;
color:white;
text-shadow: var(--stroke-width) 0 0 var(--stroke-color),
calc(var(--stroke-width) * -1) 0 0 var(--stroke-color),
0 var(--stroke-width) 0 var(--stroke-color),
0 calc(var(--stroke-width) * -1) 0 var(--stroke-color);
}
該--stroke-color
變量存儲用於文本衝程和顏色--stroke-width
存儲筆劃的寬度。然後,在文本陰影中使用這些變量。如果我們要修改文本筆觸的顏色或寬度,這僅允許在一個位置進行更改。
很整潔,不是嗎?
在該text-shadow
屬性中,我利用CSS calc
函數將上下筆劃方向的文本筆觸寬度乘以-1。
如果您開始使用它並更改文本筆觸的粗細,您會發現對於較大的值,字母的角處出了問題。
因此,我們來進行第二次回扣:
我們看到文本筆觸有一些中斷,因為我們僅使用了在4個方向上移動的4個陰影。
那麼,我們應該怎麼做才能解決這個問題?
答案很簡單:添加更多陰影!
掛在帽子上的孩子身上,拿出數學筆記本。畢竟,這是“描邊文本的權威指南”,因此我們需要徹底。
如果我們在文本中添加更多陰影,我們需要弄清楚如何在文本周圍移動這些陰影以覆蓋文本輪廓中的所有空白。直覺說,我們應該將它們均勻地分佈在半徑等於文本筆觸寬度的圓上。
而且,直覺是對的!
要計算陰影的偏移量,我們使用極坐標公式:
x = r * cos(alpha)
y = r * sin(alpha)
其中x
和y
是偏移值,r
是圓的半徑(要偏移的實際量,它轉換為文本筆觸的粗細),alpha
是圓的劃分角度。
我們可以alpha
根據要添加多少陰影來創建文本筆劃來分配值。
例如,對於8個陰影,我們將2 * PI(整個圓)除以8,得到的角度為PI / 4。然後,如果我們以alpha
PI / 4的步長(如0,PI / 4,PI / 2,…)分配值,直到完成圓,我們應該使8個陰影偏移在圓上完全對齊。
我們添加的陰影越多,描邊寬度的值越大,CSS文本描邊就越平滑。CSS中還沒有三角函數,因此我們需要自己計算值。
讓我們修改HTML和CSS代碼,以添加帶有16個陰影的平滑文本筆觸:
<span class="stroke-text smooth-16">STROKE TEXT</span>
並添加用於平滑文本筆觸的CSS:
.smooth-16 {
text-shadow: calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0
var(--stroke-color),
calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0
var(--stroke-color),
calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0
var(--stroke-color),
calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0
var(--stroke-color),
calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0
var(--stroke-color),
calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0
var(--stroke-color),
calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0
var(--stroke-color),
calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0
var(--stroke-color),
calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0
var(--stroke-color),
calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0
var(--stroke-color),
calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0
var(--stroke-color),
calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0
var(--stroke-color),
calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0
var(--stroke-color),
calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0
var(--stroke-color),
calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0
var(--stroke-color),
calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0
var(--stroke-color);
}
為了方便起見,我創建了一個JS函數,該函數根據想要的陰影數量生成筆劃文本CSS代碼。這是代碼:
/*
text-shadow from smooth-16 was created with steps = 16
*/
function calculateStrokeTextCSS(steps) {
var css = "";
for (var i = 0; i < steps; i++) {
var angle = (i * 2 * Math.PI) / steps;
var cos = Math.round(10000 * Math.cos(angle)) / 10000;
var sin = Math.round(10000 * Math.sin(angle)) / 10000;
css +=
"calc(var(--stroke-width) * " +
cos +
") calc(var(--stroke-width) * " +
sin +
") 0 var(--stroke-color),";
}
return css;
}
使用運行此函數,steps=16
您將獲得text-shadow屬性的CSS值。請注意,此JS代碼不一定必須是顯示CSS筆劃文本的頁面的一部分。這是Codepen代碼段,您可以在其中使用代碼:
現在,我們有兩種完全有效的方法來創建CSS筆觸文本,但是由於這是權威指南,因此我將不止於此,我將向您展示一些其他方法來創建帶有CSS陰影的文本輪廓。
快速提示:這種完全相同的方法適用於從PNG圖像創建輪廓圖像。
使用CSS SVG過濾器將筆劃添加到文本
如果您不了解SVG過濾器或如何使用它們,我強烈建議您閱讀這篇有關80年代字體和SVG過濾器文本複古效果的文章。警告:準備驚訝maz
基本上,您可以定義SVG過濾器,然後可以通過該filter
屬性在CSS中使用。在最近的一篇文章中,我大量使用CSS過濾器來創建CSS圖像效果。但是,在我們的例子中,我們將使用SVG / CSS過濾器向文本添加筆觸。
這是HTML代碼以及SVG過濾器定義:
<span class="stroke-text">STROKE TEXT</span>
<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" style="display:none;">
<defs>
<filter id="stroke-text-svg-filter">
<feMorphology operator="dilate" radius="2"></feMorphology>
<feComposite operator="xor" in="SourceGraphic"/>
</filter>
</defs>
</svg>
和CSS代碼:
.stroke-text{
color:dodgerblue;
filter:url(#stroke-text-svg-filter);
}
呈現藍色輪廓文本,如下所示:
那麼,這是如何工作的呢?
好吧,stroke-text-svg-filter
我們應用於文本的SVG過濾器有兩個步驟:
feMorphology
withdilate
takes the original text and “dilates” or enlarges the text in all directions by aradius
of 2 pixelsfeComposite
with theoperator="xor"
performs a XOR operation which actually subtracts from the enlarged text the original text, such that we are left with a hollow text or outlined text
Change the thickness of the text stroke you have to modify the radius
attribute in the SVG filter. To change the color
of the text stroke, simply change the color CSS property in the stroke-text
class.
This SVG filter also works for PNG images.
The only downside for this method of adding stroke to text is that the end result looks a bit coarse for bigger values of the radius
. This is because the dilation algorithm tries to expand the letters in all directions which means that it might not render a true outline which should be equally sized in all directions.
Here’s the Codepen for adding stroke to text with SVG filters:
SVG Text Outline
Besides SVG filters, we can create the text outline using SVG text and CSS specific for SVG.
Though not exactly an HTML and CSS only solution, this solution probably creates the best looking text outline effect.
To create a text outline with SVG and CSS here’s the SVG code that you add in your HTML page:
<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" width="100%">
<text class="stroke-text" x="50%" y="50%">SVG STROKE TEXT</text>
</svg>
and the CSS code:
.stroke-text{
font-size:100px;
text-align:center;
text-anchor:middle;
stroke:dodgerblue;
stroke-width:3px;
fill:none;
}
為了快速遍歷代碼,將文本SVG STROKE TEXT作為SVG文本添加到了SVG對象的中間(因此為x
和設置了50%y
)。
實際控製文本筆觸或文本輪廓的顏色和寬度的CSS代碼是2個CSS屬性stroke
和stroke-width
。請注意,這些屬性僅適用於SVG元素,不適用於HTML元素。
要創建多個文本筆觸效果,只需添加幾個額外的<text>
元素,將它們稍微偏移並更改stroke
顏色即可。
使用SVG筆觸創建雙輪廓字體效果或多個輪廓字體效果
在使用它時,您應該知道,只需對上面的代碼進行一些修改,就可以創建一些非常酷的雙倍字體或多輪廓字體效果。
只需text
在SVG中添加多個元素,並stroke
在CSS中添加不同的值即可。請注意,從最粗的筆劃開始,然後使用越來越細的筆劃值,因為文本元素將相互重疊以形成多個輪廓字體效果。
這是雙重字體效果和多重字體效果的HTML代碼:
<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" width="100%" height="200">
<text class="stroke-text thick color1" x="50%" y="50%">DOUBLE OUTLINE FONT</text>
<text class="stroke-text" x="50%" y="50%">DOUBLE OUTLINE FONT</text>
</svg>
<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" width="100%" height="200">
<text class="stroke-text thicker color1" x="50%" y="50%">MULTIPLE OUTLINE FONT</text>
<text class="stroke-text thick color2" x="50%" y="50%">MULTIPLE OUTLINE FONT</text>
<text class="stroke-text color3" x="50%" y="50%">MULTIPLE OUTLINE FONT</text>
</svg>
如您所見,我已經在其自己的<svg>
元素中添加了每種效果。CSS代碼如下所示:
.stroke-text{
font-size:80px;
text-align:center;
text-anchor:middle;
stroke:dodgerblue;
stroke-width:4px;
fill:none;
}
.thick{
stroke-width:8px;
}
.thicker{
stroke-width:12px;
}
.color1{
stroke:magenta;
}
.color2{
stroke:yellow;
}
.color3{
stroke:red;
}
如果您已經到此為止,恭喜!您現在是CSS筆觸文字Jedi!
想要成為絕地大師並了解有關CSS筆觸文本的一切嗎?繼續閱讀。
HTML5畫布文字輪廓
我知道我之前已經說過這一點,但是本文旨在作為筆觸文本的權威指南。這就是為什麼我決定包括所有方法來創建筆劃文本或HTML中的文本輪廓的方法,即使沒有CSS也是如此。
是的,可以使用HMTL5畫布創建輪廓文本。
讓我告訴你如何做!
首先,讓我們使用以下HTML代碼設置畫布:
<canvas id="myCanvas" width="850" height="300"></canvas>
然後,使用JavaScript繪製輪廓文本,如下所示:
var myCanvas = document.querySelector("#myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.font = "70px sans-serif";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.strokeText("CANVAS TEXT OUTLINE", myCanvas.width / 2, myCanvas.height / 2);
這裡重要的部分是strokeStyle
和lineWidth
設置,用於設置文本輪廓的顏色和粗細。該strokeText()
函數將實際繪製輪廓文字。
這是Codepen工作表:
結論
我希望您發現本文有用且值得,不僅是真正的CSS中筆劃指南。您現在知道了在HTML,CSS甚至HTML5畫布中創建筆劃文本或輪廓文本的多種方法。
如果您知道用於在HTML和CSS中創建筆劃文本的替代方法,請給我發送一條消息,我們很樂意將其包含在此功能強大且權威的指南中!
留言列表