close

Original Article: Stroke Text CSS - The Definitive Guide

原始文章:描邊文本CSS-權威指南

在本教程中,我將向您展示如何創建筆觸文本CSS效果。

在進入HTML和CSS代碼之前,如果您只需要創建筆觸文本圖像,請查看本教程並學習如何outline text in Photoshop文本輪廓

或者,如果您沒有Photoshop,則可以使用免費的在線工具MockoFun,該工具甚至具有專門的筆觸文本教程。

帶邊框文字

使用CSS將筆劃添加到文本 -webkit-text-stroke

描邊文字CSS

例如,讓我們在文本上添加黑色筆觸。我將從一些HTML代碼開始:

<span class="stroke-text">STROKE TEXT</span>

和CSS代碼:

.stroke-text{
  -webkit-text-stroke:5px black;
  -webkit-text-fill-color:transparent;
}

CodePen Code

很簡單,我們使文本透明–儘管這不是必需的,但我只希望文本的輪廓可見,而不是字母的正文。然後,該-webkit-text-stroke屬性添加一個5px厚的黑色輪廓描邊。您可以更改它以獲得更粗的輪廓文本或更細的輪廓,具體取決於您想要獲得的效果。

好消息:

您也可以使用它在所有基於Webkit的瀏覽器(例如​​Chrome或Edge)和Firefox上的CSS中描邊文本。

壞消息:

這是一項非標準功能,因此您不能100%依靠。

根據CanIUse.com,並非所有瀏覽器都支持它:此屬性尚未出現在任何W3C規範中。暫時包含在規範中作為text-outline屬性,但是已刪除。

只是為了向您暗示您可以使用此文本筆觸CSS屬性創建的內容,這是80年代字體文本效果庫中我的Cyber​​ Space文本效果部分。

描邊文本80年代字體效果

使用將筆劃添加到文本 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變量配置文本筆觸的顏色和粗細

基本上,您可以定義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。

如果您開始使用它並更改文本筆觸的粗細,您會發現對於較大的值,字母的角處出了問題。

因此,我們來進行第二次回扣:

CSS描邊文本

我們看到文本筆觸有一些中斷,因為我們僅使用了在4個方向上移動的4個陰影。

那麼,我們應該怎麼做才能解決這個問題?

答案很簡單:添加更多陰影!

掛在帽子上的孩子身上,拿出數學筆記本。畢竟,這是“描邊文本的權威指南”,因此我們需要徹底。

如果我們在文本中添加更多陰影,我們需要弄清楚如何在文本周圍移動這些陰影以覆蓋文本輪廓中的所有空白。直覺說,我們應該將它們均勻地分佈在半徑等於文本筆觸寬度的圓上。

而且,直覺是對的!

要計算陰影的偏移量,我們使用極坐標公式:

x = r * cos(alpha)
y = r * sin(alpha)

其中xy是偏移值,r是圓的半徑(要偏移的實際量,它轉換為文本筆觸的粗細),alpha是圓的劃分角度。

我們可以alpha根據要添加多少陰影來創建文本筆劃來分配值。

例如,對於8個陰影,我們將2 * PI(整個圓)除以8,得到的角度為PI / 4。然後,如果我們以alphaPI / 4的步長(如0,PI / 4,PI / 2,…)分配值,直到完成圓,我們應該使8個陰影偏移在圓上完全對齊。

CSS描邊文本

我們添加的陰影越多,描邊寬度的值越大,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代碼段,您可以在其中使用代碼:

CodePen Code

現在,我們有兩種完全有效的方法來創建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);
}

呈現藍色輪廓文本,如下所示:

筆劃文字SVG

那麼,這是如何工作的呢?

好吧,stroke-text-svg-filter我們應用於文本的SVG過濾器有兩個步驟:

  • feMorphology with dilate takes the original text and “dilates” or enlarges the text in all directions by a radius of 2 pixels
  • feComposite with the operator="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:

CodePen Code

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.

SVG筆劃文字

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屬性strokestroke-width。請注意,這些屬性僅適用於SVG元素,不適用於HTML元素。

CodePen Code

要創建多個文本筆觸效果,只需添加幾個額外的<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;
}

CodePen Code

如果您已經到此為止,恭喜!您現在是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);

這裡重要的部分是strokeStylelineWidth設置,用於設置文本輪廓的顏色和粗細。該strokeText()函數將實際繪製輪廓文字。

這是Codepen工作表:

CodePen Code

結論

我希望您發現本文有用且值得,不僅是真正的CSS中筆劃指南。您現在知道了在HTML,CSS甚至HTML5畫布中創建筆劃文本或輪廓文本的多種方法。

如果您知道用於在HTML和CSS中創建筆劃文本的替代方法,請給我發送一條消息,我們很樂意將其包含在此功能強大且權威的指南中!

arrow
arrow
    創作者介紹
    創作者 PSDDude 的頭像
    PSDDude

    设计师的Photoshop资源

    PSDDude 發表在 痞客邦 留言(0) 人氣()