グラフィックデザインの記事とチュートリアル。
How To Draw A Line In Photoshop
Photoshopで線を引く方法は？Photoshopで直線を描く方法を学びます。曲線はどうですか？これは簡単に思えるかもしれませんが、初心者にとっては、Photoshopの線を描くためのいくつかの基本的な方法を知っているとよいでしょう。このチュートリアルでは、Photoshopで線を描く3つの簡単な方法を学びます。ブラシツール、ペンツール、およびラインツールを使用して、単純な直線を作成できます。
Photoshopで線を引く方法 [初心者向けチュートリアル]
このチュートリアルでは、Photoshopで直線を描画する方法を学習します。また、Photoshopで曲線を描画する方法も示します。そして、少し楽しくするために、Photoshopで色付きの線を描画する方法を説明します。
[2019年アップデート]：Photoshop CC 2019ではいくつかの点が変更されていますが、Photoshopで線を描く場合にも同じ手法が適用されます。Photoshop CCの新しい曲率ペンツールに関するセクションを確認してください。
1. Photoshopでブラシを使って直線を描く方法⚡
Photoshopで線を描くには、ブラシツールまたは鉛筆ツールを使用します。小さなサイズの硬い丸いブラシを選び、単純に線を引きます。
Photoshopで直線を描画するには、Shiftキーを押したまま描画する必要があります。水平線または垂直線を作成するには、Shiftキーを押しながら、線を水平または垂直に描画します。Photoshopグリッドを使用して、線がまっすぐであることを確認します。
斜めの線または斜めの線の場合は、Shiftキーを押しながらクリックして、線の終点を追加します。Photoshopはドットを完璧な線で結びます。
1.1ブラシを使用してPhotoshopフリーハンドスタイルで直線を描画する方法
大事なことは、
ほとんどのグラフィックデザイナーは、グラフィックタブレットまたはマウスを使用して、ブラシツールでフリーハンド描画を行うことです。数回試してみると、斜めの線や縦の線よりも横の直線を描くほうが簡単であることがわかります。
それがまさに私たちの手が働く方法です。
Photoshopでキャンバスを回転させる方法
Photoshop（CS5、CS6、CC 2018、CC 2019）でできる便利なトリックの1つは、キャンバス全体を回転させることです。画用紙を回転させるように。Rをクリックし、マウスでクリックアンドドラッグすることでそれを行うことができます。Shiftキーを押しながらドラッグすると、キャンバスの回転が15度単位でスナップされます。
これは、Photoshopで直線を描画する方法と、Photoshopでキャンバスを回転させる方法を示すビデオです。
<video controls="" poster="/tutorials/draw-a-line-in-photoshop/how-to-rotate-canvas-in-photoshop.jpg" preload="none" ><source src="http://www.psd-dude.com/tutorials/draw-a-line-in-photoshop/draw-straight-lines-in-photoshop-1.mp4" type="video/mp4"></video>
注：Photoshop CC 2019でこれを実行しようとすると、次のエラーが発生しました。
回転は、OpenGL対応のドキュメントウィンドウでのみ機能します
そうですね、Photoshop CC 2019でこれを行うには、より高いハードウェア要件があることがわかります。解決策は、[編集]> [設定]に移動してから、パフォーマンスパネルで [ GPU設定でOpenGL図面を有効にする]を選択することです。ハードウェアが要件を満たしていない場合、このチェックボックスはグレー表示されます。
2. Photoshopで直線ツールを使って直線を描く方法⚡
別の方法は、Photoshopのツールバーにあるラインツールを使用することです。この線はベクトル形状なので、品質を失うことなく、形状、色、寸法を簡単に変更できます。SHIFTキーは直線にも使用できます。
プロジェクトにベクターラインが必要な場合は、Photoshop用のLine Shapesをダウンロードしてください。
3.ペンツールでPhotoshopに線を引く方法⚡
3番目の方法は、ペンツールを使用して線を描くことです。まず、パスオプションをチェックする必要があります。次に、クリックして最初のポイントを追加し、もう一度クリックして2番目のポイントを追加します。直線の場合は、SHIFTキーを押したままにします。
したがって、ブラシツールを選択し、ハードラウンドブラシ（サイズ3px、黒）を選択します。
ではペンツール、選択パスをして線を引きます。線は作業パスとして追加されます。
線を描くには、作業パスを右クリックして[ ストロークパス ] を選択します。リストからブラシツールを選択します。
これで、パスを削除するか、それを使用して他の線を描くことができます。パスの移動、サイズ変更、形状の変更、回転などを行うことができます。
ヒント：パスをストロークする前にレイヤーを選択しておく必要があります。そうしないと機能しない場合があります。ここでは、パスを描画する方法と、Photoshopでブラシツールを使用してパスをストロークする方法についての簡単なチュートリアルを示します（ビデオチュートリアル）。また、初心者向けのStroke Path Photoshopチュートリアルを読むこともできます。
4. Photoshopで曲線を描く方法⚡
Photoshopで曲線を描くには、パスを選択した状態でペンツールを使用して、曲線パスを作成する必要があります。ペンツールを使用してドラッグし、曲線セグメントの最初のスムーズポイントを作成して、マウスボタンを離します。
曲線を描くには、作業パスを右クリックして[ ストロークパス ] を選択します。リストからブラシツールを選択します。
Photoshop CC 2019で曲線を描く方法
Photoshop CC 2019には、便利で新しいものがたくさんあります。それらの1つは、新しいCurvature Pen Toolです。長押しすると、ペンツールアイコンの下に表示されます。
新しいCurvature Pen Toolを使用するには、1回クリックする必要があります。Photoshopは、クリックした点を結ぶ曲線を描画します。ダブルクリックすると鋭い角ができます。2点間の線をクリックすると、点を追加およびドラッグして曲線を作成できます。
曲線を作成したら、ストロークパスを使用して線を描画する必要があります。
5. Photoshopで色付きの線を描く方法⚡
Photoshopで色付きの線を描画するには、線を描画したレイヤーにレイヤースタイルを追加します。Photoshopで色付きの線を作成するには、グラデーションオーバーレイレイヤースタイルを使用します。
6. Photoshopの点線⚡
Photoshopで点線を描画するには、点線ブラシを使用する必要があります。このチュートリアルでは、Photoshopで点線を作成する方法を学習します。
7. Photoshopの破線
Photoshopで破線を描画するには、破線ブラシを使用する必要があります。このチュートリアルでは、Photoshopで破線を作成する方法を学習します。
8. Photoshopで線を延長する方法
PhotoshopでControl-Tを押して線を延長します。このサイズ変更方法は、直線（垂直線と水平線）に対してのみ機能します。
9. Photoshopで線を太くする方法
フォトショップで線幅を変更するにはどうすればよいですか？線ツールを使用する場合は、線の太さを設定する必要があります。
ブラシツールを使用する場合、Photoshopで線を太くするには、ブラシツールのサイズを大きくする必要があります。
Photoshopで既存の線を太くする方法
答えは簡単です！[ フィルター ] > [ その他 ]メニューに移動し、[ 最小フィルター]を選択します。このフィルターを使用すると、Photoshopで線のサイズを大きくし、既存の線を太くすることができます。
ラインアートをすばやくクリーンにしたい場合は、この無料のアクションを試して、Photoshopで線を太くしてください。
10. Photoshopで平行線を描く
Photoshopで平行線を描画するには、直線（垂直または水平）を描画し、Ctrl + Jキーを押して複製します。次に、線を移動して平行線を取得します。
クイックヒント：水平/垂直のグラデーション（＃000000、不透明度100％および＃000000、不透明度0％）で新しいレイヤーを作成します。行くフィルター>ディストーション>ウェーブやPhotoshopで平行線を描画するために、これらの設定を行います。
11. Photoshopを使用して滑らかな線のデジタルアートを描画する方法
写真を線画に変換したい場合は、このLine Art Photoshopアクションを使用できます。
Photoshopでテキストの周囲に境界線を付ける方法。
Photoshopで縁取りのあるテキストを作成する方法を見てみましょう
画像にテキストを追加すると、画像の背景に溶け込み、読みにくくなります。アウトライン化されたテキストは読みやすくなります。
まず、文字ツールでテキストを配置しましょう。色を設定す
レイヤースタイルをテキストレイヤーに追加し、「ボーダー」にチェックを入れます。希望する色を設定します。
「グロー（外側）」にチェックを入れます。描画モードを標準に設定し、不透明度と広がりを100％に設定します。色とサイズを編集します。
ストロークテキストPhotoshopアクション
Outline Text in Photoshop [無料のPhotoshopアクション]
オンラインでテキストをストロークするには、MockoFunテキストエディターを使用します
Stroke Text [オンラインのフリーテキスト効果] ❤️★
オンラインでテキストをストロークするには、MockoFunテキストエディターを使用します
Original Article: Stroke Text CSS - The Definitive Guide
このチュートリアルでは、ストロークテキストの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;
}
単純明快に、テキストを透明にします。これは必須ではありませんが、文字の本文ではなくテキストの輪郭だけを表示したいだけです。次に、-webkit-text-strokeプロパティは5pxの太さの黒いアウトラインストロークを追加します。これを変更して、取得したい効果に応じて、アウトラインテキストを太くしたり、細くしたりできます。
良いニュース：
これを使用して、すべてのWebkitベースのブラウザー（ChromeやEdgeなど）とFirefoxでもCSSでテキストをストロークできます。
悪いニュース：
これは非標準の機能であるため、100％信頼できるものではありません。
CanIUse.comによると、すべてのブラウザでサポートされているわけではありません。このプロパティは、どのW3C仕様にも含まれていません。text-outlineプロパティとして簡単に仕様に含まれていましたが、これは削除されました。
このテキストストロークCSSプロパティで作成できることのヒントを提供するために、これが80年代フォントテキストエフェクトギャラリーの私のサイバースペーステキストエフェクトの一部です。
ストロークテキスト80年代フォント効果
を使用してテキストにストロークを追加する text-shadow
CSSでテキストの輪郭を描くもう1つの方法は、シャドウを使用することです。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の幅が格納されます。次に、テキストシャドウでこれらの変数を使用します。これにより、テキストストロークの色または幅を変更する場合に、1か所のみを変更できます。
かなりすっきりしていますね。
このtext-shadowプロパティでは、CSS calc関数を使用して、上と左のシャドウ方向のテキストストローク幅を-1で乗算できるようにしています。
これをいじってテキストストロークの太さを変更すると、大きな値の場合、文字の角に問題があることに気付くでしょう。
そして、私たちは2番目のドローバックに到達します。
CSSストロークテキスト
4つの方向にシフトする4つのシャドウのみを使用しているため、テキストストロークにいくつかの切れ目があります。
それで、これを修正するにはどうすればよいですか？
答えは簡単です。影を追加してください！
帽子をかぶった子供たちを待って、数学のノートを取り出してください。結局のところ、これは「ストロークテキストの決定的なガイド」なので、徹底する必要があります。
テキストにさらにシャドウを追加する場合は、テキストのアウトラインのすべてのギャップをカバーするために、テキストの周りでそれらのシャドウをシフトする方法を理解する必要があります。直感は、テキストストロークの幅と等しい半径の円に均等に広げる必要があると述べています。
そして、直感は正しいです！
影のオフセットを計算するには、極座標式を使用します。
x = r * cos(alpha)
y = r * sin(alpha)ここで、xおよびyオフセット値であり、r円（我々は、テキストストロークの太さに変換これにより相殺することが実際の量）の半径であり、alpha我々は内円を分割したいする角度です。
alphaテキストストロークを作成するために追加するシャドウの数に応じて、に値を割り当てることができます。
たとえば、8つのシャドウの場合、2 * PI（完全な円）を8で割り、PI / 4の角度になります。次に、alpha0、PI / 4、PI / 2などのPI / 4のステップで値を割り当てると、円が完成するまで、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);
}
便宜上、必要なシャドウの数に応じてストロークテキストCSSコードを生成するJS関数を作成しました。これがコードです：
/*
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ストロークテキストを作成するための2つの完全に有効な方法がありますが、これは決定的なガイドなので、ここで止めることはせず、CSSシャドウを使用してテキストアウトラインを作成するための追加の代替方法をいくつか示します。
クイックヒント：このまったく同じ方法は、たとえばPNG画像からアウトライン画像を作成する場合にも機能します。
CSS SVGフィルターを使用してテキストにストロークを追加する
SVGフィルターについて、またはフィルターで何ができるかについて知らない場合は、80年代のフォントとSVGフィルターテキストのレトロ効果に関するこの記事を読むことを強くお勧めします。警告：驚かれる準備をしてください
基本的に、CSSでfilterプロパティを使用して使用できるSVGフィルターを定義できます。最近の記事の1つで、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フィルタは、2つのステップがあります。
feMorphologywith dilateは、元のテキストを取得し、テキストを全方向radiusに2ピクセルずつ「拡張」または拡大します。
feCompositeを使用してoperator="xor"、拡大テキストから元のテキストを実際に減算するXOR演算を実行します。これにより、白抜きのテキストやアウトラインテキストが残ります。
radiusSVGフィルターの属性を変更する必要があるテキストストロークの太さを変更します。colorテキストストロークのを変更するには、stroke-textクラスのcolor CSSプロパティを変更するだけです。
このSVGフィルターは、PNG画像でも機能します。
このストロークをテキストに追加するこの方法の唯一の欠点は、最終的な結果がの大きな値に対して少し粗く見えることですradius。これは、膨張アルゴリズムが文字をすべての方向に拡張しようとするためです。つまり、すべての方向に同じサイズの真のアウトラインがレンダリングされない可能性があります。
SVGフィルターを使用してテキストにストロークを追加するためのコードペンは次のとおりです。
SVGテキストアウトライン
SVGフィルターの他に、SVGテキストとSVGに固有のCSSを使用してテキストアウトラインを作成できます。
HTMLとCSSのみのソリューションではありませんが、このソリューションはおそらく最も見栄えのよいテキストアウトライン効果を生み出します。
SVGストロークテキスト
SVGとCSSでテキストアウトラインを作成するには、HTMLページに追加するSVGコードを次に示します。
<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>
そしてCSSコード：
.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ストロークで二重のアウトラインフォント効果または複数のアウトラインフォント効果を作成する
あなたがそれに取り組んでいる間、あなたは上記のコードにほんの2、3の変更を加えるだけで、いくつかの本当にクールな二重または複数のアウトラインフォント効果を作成できることを知っておくべきです。
二重アウトラインフォント
CSSのtext異なるstroke値を持つSVGに複数の要素を追加するだけです。複数のアウトラインフォント効果を形成するためにテキスト要素が互いの上に配置されるため、最も太いストロークから始めて、細いストローク値に進むように注意してください。
ダブルフォント効果とマルチフォント効果の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キャンバステキストのアウトライン
私は以前にこれを言ったことを知っていますが、この記事は、テキストをストロークするための決定的なガイドとなることを意図しています。CSSがなくても、ストロークテキストまたはテキストアウトラインをHTMLで作成するためのすべてのメソッドを含めることにしました。
はい、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だけでなく、CSSでテキストをストロークするための真の決定的なガイドになるのに役立ち、価値があることを願っています。これで、HTML、CSS、さらにはHTML5キャンバスでストロークテキストまたはアウトラインテキストを作成する複数の方法がわかりました。
HTMLとCSSでストロークテキストを作成する別の方法を知っている場合は、メッセージを送ってください。この素晴らしい決定的なガイドに含めたいと思います。