タイプセッティングエンドポイントを使用した複数行テキストとオーバーレイ
画像上にテキストを重ねるデザインは、保護用の透かしから面白いインターネットミームまで、長い歴史を持っています。ソーシャルメディアやパーソナライズされたユーザー体験がすべてのWebプラットフォームで重要になるにつれて、言葉とイメージを動的に組み合わせることは強力ですが、実装が複雑で、多くの製品にとって重要です。
imgixは長い間、このニーズに対処する単行テキストパラメータのセットを提供してきました。タイプセッティングエンドポイント（~text）は、複数行のテキスト、リーディング、文字間隔などの追加のコントロールを提供します。
フォントサイズとフォント、色、パディング、アウトライン、アラインメント、クロッピング/クリッピングのコントロールを備えたtxtパラメータは、画像にテキストの行を追加するのを非常に簡単にします。しかし、x/y位置指定、複数行のテキスト、コントラストを改善するための背景色の追加といった機能は含まれていません。
タイプセッティングエンドポイントは、既存のテキスト機能とリーディング、文字追跡、複数行、背景色などの高度なタイポグラフィックコントロールを組み合わせています。より重要なことに、ベース画像がなくても直接エンドポイントから画像を作成できます。
~textエンドポイントで作成された画像は、他のレンダリング画像と同様にクレジットを消費します。
タイプセッティングエンドポイントによって作成された新しい画像は、他の画像と同様に扱われ、多数のimgix操作を受け入れます。さらに強力なアプリケーションのために、blendおよびmarkパラメータを使用してリアルタイムで正確な複雑なレイアウトを作成することができます。
タイプセッティングエンドポイントは、テキストと画像を一緒に必要とする任意の製品や機能のためのコンポジションとレイアウトエンジンとして使用でき、テキストオーバーレイを事前に生成する必要はありません。実用的なアプリケーションセクションで、この機能を活用して構築できる新しいユーザーエクスペリエンスの例を紹介します。
注意： タイプセッティングエンドポイントはBase64エンコーディングを優先し、関連するパラメータのBase64バージョンを使用する必要があります。詳細については、Base64ブログ投稿を参照してください。
基本的なタイプセッティング #basic
タイプセッティングエンドポイント（~text）は、完全なタイポグラフィックコントロールに必要なコントロールを追加することで、imgixの既存のテキストパラメータを拡張します。まず第一に、指定した幅に自動的に単語を折り返して複数行のテキストレイアウトを可能にします。高さは柔軟で、高さが指定されていない場合、画像はテキストに合わせて拡大します。
dpr=2&fm=png&txt-size=28&w=320&txt-font64=SGVsdmV0aWNhIE5ldWUgTGlnaHQ&txt64=RmFyIGZhciBhd2F5LCBiZWhpbmQgdGhl&txt-pad=0&txt-color=212B32
dpr=2&fm=png&txt-size=28&w=320&txt-font64=SGVsdmV0aWNhIE5ldWUgTGlnaHQ&txt64=RmFyIGZhciBhd2F5LCBiZWhpbmQgdGhlIHdvcmQgbW91bnRhaW5zLCBmYXIgZnJvbSB0aGUgY291bnRyaWVzLCB0aGVyZSBsaXZlIHRoZSBibGluZA&txt-pad=0&txt-color=212B32
タイプセッティングエンドポイントはまた、行と文字間の間隔を微調整するためのリーディング（txt-lead）とトラッキング（txt-track）を設定することができます。既存のtxt-font、txt-color、txt-pad、txt-align、およびbgパラメータと組み合わせることで、引用オーバーレイなどの人気機能を簡単に作成できます。生成された画像は、定義したテキスト、幅、フォントサイズに合わせて拡大します。デフォルトの幅は200で、高さはhパラメータで制約することができます。
トラッキング | txt-track
トラッキングは、すべての文字間のスペーシングを変更する機能を提供します。
w=640&h=230&txt-size=48&txt64=VGhlIHF1aWNrIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZy4&txt-color=212B32&txt-pad=32&txt-font64=SGVsdmV0aWNhIE5ldWUgTGlnaHQ&txt-track=-2
w=640&h=230&txt-size=48&txt64=VGhlIHF1aWNrIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZy4&txt-color=212B32&txt-pad=32&txt-font64=SGVsdmV0aWNhIE5ldWUgTGlnaHQ&txt-track=20
リーディング | txt-lead
リーディングは、テキスト行間のスペース量を制御します。
w=640&h=230&txt-size=48&txt64=VGhlIHF1aWNrIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZy4&txt-color=212B32&txt-pad=32&txt-font64=SGVsdmV0aWNhIE5ldWUgTGlnaHQ&txt-lead=0
w=640&h=230&txt-size=48&txt64=VGhlIHF1aWNrIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZy4&txt-color=212B32&txt-pad=32&txt-font64=SGVsdmV0aWNhIE5ldWUgTGlnaHQ&txt-lead=30
背景色 | bg
テキストエリアに背景色を設定します。
w=640&h=230&txt-size=48&txt64=VGhlIHF1aWNrIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZy4&txt-color=212B32&txt-pad=32&txt-font64=SGVsdmV0aWNhIE5ldWUgTGlnaHQ
w=640&h=230&txt-size=48&txt64=VGhlIHF1aWNrIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZy4&txt-color=fff&txt-pad=32&txt-font64=SGVsdmV0aWNhIE5ldWUgTGlnaHQ&bg=07283A
アライメント | txt-align
テキストの水平アライメントを設定します。可能な値は、left、center、rightです。
w=640&h=230&txt-size=48&txt64=VGhlIHF1aWNrIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZy4&txt-color=212B32&txt-pad=32&txt-font64=SGVsdmV0aWNhIE5ldWUgTGlnaHQ&txt-align=center
w=640&h=230&txt-size=48&txt64=VGhlIHF1aWNrIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZy4&txt-color=212B32&txt-pad=32&txt-font64=SGVsdmV0aWNhIE5ldWUgTGlnaHQ&txt-align=right
ベース画像に生成されたテキストを使用するには、タイプセッティングエンドポイントによって作成されたURL全体をベース画像URLにmarkまたはblendの値として追加します。テキスト画像URLは最初にBase64エンコードされる必要があり、mark64またはblend64のバリアントのパラメータを使用する必要があります。たとえば、写真家が使用するかもしれないシンプルな2行のキャプションは次のようになります：
以下に、画像に適用されたパラメータとテキストオーバーレイに適用されたパラメータの詳細、そして上記の画像の完全なURLを示します。
ベース画像
https://assets.imgix.net/unsplash/unsplash005.jpg
画像パラメータ
w=600 q=90 mark-pad=0 mark-align=bottom,left mark64=*
テキストウォーターマークパラメータ
Base64エンコードされた文字列全体がmarkに渡されます：
txt-size=16 w=300 bg=70000000 txt-color=fff txt-font=HelveticaNeue-Medium txt64=バルセロナ、スペインで撮影。写真家 - アレクサンドレ・ペロット (このテキスト文字列もBase64で事前エンコードされています)
最終URL
https://assets.imgix.net/unsplash/unsplash005.jpg?q=90&mark-align=bottom,left&mark-pad=0&w=640&mark64=aHR0cDovL2Fzc2V0cy5pbWdpeC5uZXQvfnRleHQ_dHh0cGFkPTE1JnR4dHNpemU9MTYmdz0zMDAmYmc9NzAwMDAwMDAmdHh0Y29sb3I9ZmZmJnR4dGZvbnQ9SGVsdmV0aWNhTmV1ZS1NZWRpdW0mdHh0NjQ9VkdGclpXNGdhVzRnUW1GeVkyVnNiMjVoTENCVGNHRnBiaTRnVUdodmRHOW5jbUZ3YUdWeUlDMGdRV3hsZUdGdVpISmxJRkJsY205MGRHOA
ブレンドとウォーターマークによる合成 #composite
基本的なテキストオーバーレイとレイアウトに加えて、タイプセッティングエンドポイントを（markおよびblendと組み合わせて）使用すると、テキストブロックの正確な位置指定や、1つのベース画像上への複数のテキストオーバーレイなど、より複雑な合成が可能になります。上記の例と同様に、ネストを可能にするため、すべてのtxt、mark、blendの値は事前にBase64でエンコードされています。
ベース画像
https://assets.imgix.net/unsplash/nightsky.jpg
ブレンドとして設定したテキストエンドポイント
blend64=
https://assets.imgix.net/~text?txt64=Far far away, txt-color=fff txt-font=avenir-black txt-size=48 w=600 txt-pad=20
ウォーターマークとして設定したテキストエンドポイント
mark64=
https://assets.imgix.net/~text?txt64=behind the word mountains, far from the countries Vokalia and Consonantia, there live the blindtexts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. txt-color=fff txt-font=avenir txt-size=18 txt-pad=20 w=520
マークの位置指定
mark-x=20 mark-y=150
ブレンドモードと位置指定
blend-x=20 blend-y=80 blend-mode=normal
画像の幅を設定
w=640
最終URL
https://assets.imgix.net/unsplash/nightsky.jpg?w=640&mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVltVm9hVzVrSUhSb1pTQjNiM0prSUcxdmRXNTBZV2x1Y3l3Z1ptRnlJR1p5YjIwZ2RHaGxJR052ZFc1MGNtbGxjeUJXYjJ0aGJHbGhJR0Z1WkNCRGIyNXpiMjVoYm5ScFlTd2dkR2hsY21VZ2JHbDJaU0IwYUdVZ1lteHBibVFnZEdWNGRITXVJRk5sY0dGeVlYUmxaQ0IwYUdWNUlHeHBkbVVnYVc0Z1FtOXZhMjFoY210elozSnZkbVVnY21sbmFIUWdZWFFnZEdobElHTnZZWE4wSUc5bUlIUm9aU0JUWlcxaGJuUnBZM01zSUdFZ2JHRnlaMlVnYkdGdVozVmhaMlVnYjJObFlXNCZ0eHRjbHI9ZmZmJnR4dGZvbnQ9YXZlbmlyJnc9NTIwJnR4dHNpemU9MTgmdHh0cGFkPTIw&mark-y=150&mark-x=20&blend64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVJtRnlJR1poY2lCaGQyRjVMQSZ0eHRjbHI9ZmZmJnR4dGZvbnQ9YXZlbmlyLWJsYWNrJnR4dHNpemU9NDgmdz02MDAmdHh0cGFkPTIw&blend-mode=normal&blend-x=20&blend-y=80
テキストブロックの位置指定 #position
markとblendは、どちらもテキストオーバーレイのピクセル単位の正確な位置指定とパディングを提供します。mark-x/mark-yおよびblend-x/blend-yパラメータは、指定した座標にオーバーレイを正確に配置します。xとyが同じでない場合や、オーバーレイを画像の端にぴったり寄せたい場合に最適です。0に設定すると、デフォルトのパディング値10が上書きされ、端に揃います。
同様に、mark-padおよびblend-padパラメータを使用すると、オーバーレイの周囲にパディングを追加して、ベース画像の端から離すことができます。パディングは画像のアライメントに対して相対的に適用されるため、mark-align=bottomかつmark-pad=20の場合、オーバーレイは下端から20ピクセルの位置に配置されます。
mark-align=top,left&mark-pad=0&mark64=aHR0cDovL2Fzc2V0cy5pbWdpeC5uZXQvfnRleHQ_dHh0NjQ9UVNCemJXRnNiQ0J5YVhabGNpQnVZVzFsWkNCRWRXUmxiaUJtYkc5M2N5QmllU0IwYUdWcGNpQndiR0ZqWlNCaGJtUWdjM1Z3Y0d4cFpYTWdhWFFnZDJsMGFDQjBhR1VnYm1WalpYTnpZWEo1SUhKbFoyVnNhV0ZzYVdFdUlFbDBJR2x6SUdFZ2NHRnlZV1JwYzJWdFlYUnBZeUJqYjNWdWRISjVMQ0JwYmlCM2FHbGphQ0J5YjJGemRHVmtJSEJoY25SeklHOW1JSE5sYm5SbGJtTmxjeUJtYkhrZ2FXNTBieUI1YjNWeUlHMXZkWFJvTGcmdHh0Y2xyPWZmZiZ0eHRzaXplPTI0Jnc9NDAw&w=640
w=640&mark64=aHR0cDovL2Fzc2V0cy5pbWdpeC5uZXQvfnRleHQ_dHh0NjQ9UVNCemJXRnNiQ0J5YVhabGNpQnVZVzFsWkNCRWRXUmxiaUJtYkc5M2N5QmllU0IwYUdWcGNpQndiR0ZqWlNCaGJtUWdjM1Z3Y0d4cFpYTWdhWFFnZDJsMGFDQjBhR1VnYm1WalpYTnpZWEo1SUhKbFoyVnNhV0ZzYVdFdUlFbDBJR2x6SUdFZ2NHRnlZV1JwYzJWdFlYUnBZeUJqYjNWdWRISjVMQ0JwYmlCM2FHbGphQ0J5YjJGemRHVmtJSEJoY25SeklHOW1JSE5sYm5SbGJtTmxjeUJtYkhrZ2FXNTBieUI1YjNWeUlHMXZkWFJvTGcmdHh0Y2xyPWZmZiZ0eHRzaXplPTI0Jnc9NDAw&mark-pad=0&mark-align=center,middle
w=640&mark64=aHR0cDovL2Fzc2V0cy5pbWdpeC5uZXQvfnRleHQ_dHh0NjQ9UVNCemJXRnNiQ0J5YVhabGNpQnVZVzFsWkNCRWRXUmxiaUJtYkc5M2N5QmllU0IwYUdWcGNpQndiR0ZqWlNCaGJtUWdjM1Z3Y0d4cFpYTWdhWFFnZDJsMGFDQjBhR1VnYm1WalpYTnpZWEo1SUhKbFoyVnNhV0ZzYVdFdUlFbDBJR2x6SUdFZ2NHRnlZV1JwYzJWdFlYUnBZeUJqYjNWdWRISjVMQ0JwYmlCM2FHbGphQ0J5YjJGemRHVmtJSEJoY25SeklHOW1JSE5sYm5SbGJtTmxjeUJtYkhrZ2FXNTBieUI1YjNWeUlHMXZkWFJvTGcmdHh0Y2xyPWZmZiZ0eHRzaXplPTI0Jnc9NDAw&mark-pad=0&mark-align=bottom,right
w=640&mark64=aHR0cDovL2Fzc2V0cy5pbWdpeC5uZXQvfnRleHQ_dHh0NjQ9UVNCemJXRnNiQ0J5YVhabGNpQnVZVzFsWkNCRWRXUmxiaUJtYkc5M2N5QmllU0IwYUdWcGNpQndiR0ZqWlNCaGJtUWdjM1Z3Y0d4cFpYTWdhWFFnZDJsMGFDQjBhR1VnYm1WalpYTnpZWEo1SUhKbFoyVnNhV0ZzYVdFdUlFbDBJR2x6SUdFZ2NHRnlZV1JwYzJWdFlYUnBZeUJqYjNWdWRISjVMQ0JwYmlCM2FHbGphQ0J5YjJGemRHVmtJSEJoY25SeklHOW1JSE5sYm5SbGJtTmxjeUJtYkhrZ2FXNTBieUI1YjNWeUlHMXZkWFJvTGcmdHh0Y2xyPWZmZiZ0eHRzaXplPTI0Jnc9NDAw&mark-pad=40
画像をクリックするとSandboxで表示されます。
色付き・半透明の背景とテキスト
タイプセッティングエンドポイントのもう1つの利点は、テキストの背後に背景を配置し、その不透明度を制御できることです。背景は、上記の写真家のウォーターマークの例のようにbgパラメータを適用するだけで簡単に追加できます。この例では半透明の黒を表す8桁（AARRGGBB）の16進数カラー（80000000）を使用していますが、単色にしたい場合は bg に3桁および6桁のカラーも使用できます。8桁のカラーでは、最初の2桁が16進数のアルファチャンネルを表します。80 は約50%の不透明度なので、80000000 は約半分の不透明度の黒になります。
blendパラメータを使用して、テキスト自体に半透明を適用することもできます。blend-mode=normalを設定し、blend-alphaを不透明度のパーセンテージに設定すると、blendパラメータの値として指定したテキストにその値が適用されます。不透明度は、オーバーレイに設定したtxt-colorの値（デフォルトは000）に適用されます。これはmarkとmark-alphaパラメータでも実現できます。
mark-pad=0&w=600&mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVNYUWdhWE1nWVNCd1lYSmhaR2x6WlcxaGRHbGpJR052ZFc1MGNua3NJR2x1SUhkb2FXTm9JSEp2WVhOMFpXUWdjR0Z5ZEhNZ2IyWWdjMlZ1ZEdWdVkyVnpJR1pzZVNCcGJuUnZJSGx2ZFhJZ2JXOTFkR2d1JmJnPWFhMTcxRTIzJnR4dGNscj1mZmYmdHh0c2l6ZT0yOCZ3PTUwMCZ0eHRwYWQ9MjA&mark-align=center,bottom
mark-align=center,bottom&mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVNYUWdhWE1nWVNCd1lYSmhaR2x6WlcxaGRHbGpJR052ZFc1MGNua3NJR2x1SUhkb2FXTm9JSEp2WVhOMFpXUWdjR0Z5ZEhNZ2IyWWdjMlZ1ZEdWdVkyVnpJR1pzZVNCcGJuUnZJSGx2ZFhJZ2JXOTFkR2d1JmJnPWFhMTcxRTIzJnR4dGNscj1mZmYmdHh0c2l6ZT0yOCZ3PTUwMCZ0eHRwYWQ9MjA&w=600&mark-pad=0&mark-alpha=25
画像をクリックするとSandboxで表示されます。
実用的なアプリケーション
単純なオーバーレイの使用に加えて、テキストと画像を効果的に組み合わせて、より豊かなビジュアル体験やクリエイティブツールを作成する方法は数多くあります。特に、プログラムでテキストをタイプセッティングエンドポイントに渡せることで、ソーシャルメディアでの共有を目的とした出力画像を、より動的にパーソナライズし制御できます。次のような一般的なユースケースを検討してください：
プレースホルダー画像
wとhの両パラメータに幅と高さを渡し、タイプセッティングエンドポイントを使用することで、画像を用意せず最小限のCSSで、指定したサイズの画像を生成できます。https://placem.at/は、パブリックドメインの画像とともにこの機能を使用するプレースホルダーサービスです。下のボタンをクリックすると、非常にシンプルな実装例を見ることができます。
パーソナライズ/帰属表示
プログラムで任意の画像にユーザーデータを追加して、より良いユーザー体験を作成できます。
- ユーザー生成コンテンツにウォーターマークを入れて、ユーザーの投稿を保護する
- ユーザーのプロフィールや好みに基づいて、プロモーション用のパーソナライズされた画像を作成する（メールなど、CSSが問題になるアプリケーションに最適）
ユーザー生成コンテンツ
画像を選び、テキストを入力し、以下のベストプラクティスセクションに挙げるようなオーバーレイ効果を適用することで、ユーザーが共有可能な引用画像を簡単に作成できるツールを作成できます。
広告/ソーシャルメディア
Photoshopを開くことなく、ハッシュタグ、引用、キャプション、URLなどの動的に生成されたテキストを、ソーシャルメディアで共有するコンテンツに追加できます。
画像上のタイポグラフィのベストプラクティス
ベース画像の色の範囲や視覚的な複雑さによっては、画像の上でテキストをきれいに見せるのは難しい場合があります。ここでは、タイプセッティングエンドポイントをオーバーレイに使用する際のデザイン判断に役立つヒントと例を紹介します。
mark-pad=0&w=600&h=300&fit=crop&mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVJWWkZUaUJVU0VVZ1FVeE1MVkJQVjBWU1JsVk1JRkJQU1U1VVNVNUhJRWhCVXlCT1R5QkRUMDVVVWs5TUlFRkNUMVZVSUZSSVJTQkNURWxPUkNCVVJWaFVVdyZ0eHRjbHI9ZmZmJnR4dHNpemU9Mjgmdz01MDAmdHh0cGFkPTIwJnR4dGZvbnQ9YXZlbmlyLWJsYWNrJnR4dGFsaWduPWNlbnRlcg&mark-align=center,middle
mark-pad=0&w=600&h=300&fit=crop&mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVJWWkZUaUJVU0VVZ1FVeE1MVkJQVjBWU1JsVk1JRkJQU1U1VVNVNUhJRWhCVXlCT1R5QkRUMDVVVWs5TUlFRkNUMVZVSUZSSVJTQkNURWxPUkNCVVJWaFVVdyZiZz1kZDBBQUZFMiZ0eHRjbHI9ZmZmJnR4dHNpemU9Mjgmdz01MDAmdHh0cGFkPTIwJnR4dGZvbnQ9YXZlbmlyLWJsYWNrJnR4dGFsaWduPWNlbnRlcg&mark-align=center,middle
blend-mode=normal&blend=aaF5532A&mark-pad=0&w=600&h=300&fit=crop&mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVJWWkZUaUJVU0VVZ1FVeE1MVkJQVjBWU1JsVk1JRkJQU1U1VVNVNUhJRWhCVXlCT1R5QkRUMDVVVWs5TUlFRkNUMVZVSUZSSVJTQkNURWxPUkNCVVJWaFVVdyZ0eHRjbHI9ZmZmJnR4dHNpemU9Mjgmdz01MDAmdHh0cGFkPTIwJnR4dGZvbnQ9YXZlbmlyLWJsYWNrJnR4dGFsaWduPWNlbnRlcg&mark-align=center,middle
blur=200&mark-pad=0&w=600&h=300&fit=crop&mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVJWWkZUaUJVU0VVZ1FVeE1MVkJQVjBWU1JsVk1JRkJQU1U1VVNVNUhJRWhCVXlCT1R5QkRUMDVVVWs5TUlFRkNUMVZVSUZSSVJTQkNURWxPUkNCVVJWaFVVdyZ0eHRjbHI9ZmZmJnR4dHNpemU9Mjgmdz01MDAmdHh0cGFkPTIwJnR4dGZvbnQ9YXZlbmlyLWJsYWNrJnR4dGFsaWduPWNlbnRlcg&mark-align=center,middle
画像をクリックするとSandboxで表示されます
ベース画像をシンプルに保つ
テキストを読みやすくする最も簡単な方法は、ごちゃごちゃしていないベース画像や、テキストとコントラストを取れる十分な単色の領域があるベース画像を選ぶことです。ただし、テキストの位置を画像ごとに変える必要があるため、この方法は大量の画像よりも単発の用途に向いています。
背景色を追加する
ベース画像が特にごちゃごちゃしている場合は、テキストに背景とパディングを追加することで、テキストの背後に落ち着いた領域を作成できます。基本的な背景には、bg=000&mark-pad=20を試してください。必要に応じて、画像に合わせて色を調整できます。
画像全体に透明な色を重ねる
この方法では写真が多少見えにくくなりますが、画像の細部がそれほど重要でない場合は、テキストを際立たせるのに役立ちます。blendパラメータに色の16進数値を指定することで、任意の色のオーバーレイを適用できます。blendは、8桁の16進数値を使用するか、blendに加えてblend-alphaパラメータを使用することで透明度をサポートします。
ベース画像をぼかす
視覚的なノイズを減らすもう1つの方法は、ベース画像をぼかして細部の量を減らすことです。blurパラメータを使用すると簡単に実現できます。まずblur=100を設定し、そこから調整してみてください。
さらに試すには
タイプセッティングエンドポイントは強力なツールであり、ここで紹介した手法は、試しに使ってみたり、何を構築できるかを検討したりする際の出発点として最適です。ただし、これらは可能性のほんの始まりにすぎません。この記事のSandboxへのリンク、以下のサンプルコード、ドキュメントの例を活用して、さまざまなオプションや効果の組み合わせをぜひ試してみてください。