質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

ウェブアプリケーション

ウェブアプリケーションとは、ウェブ上でアクセスされるアプリケーションのことを呼びます。この場合におけるウェブとは、インターネットやイントラネット上を意味します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

受付中

【adobe fonts を blob化したい】SVG textをcanvasで画像(png)変換すると、font-familyが無視される

yooonb
yooonb

総合スコア17

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

ウェブアプリケーション

ウェブアプリケーションとは、ウェブ上でアクセスされるアプリケーションのことを呼びます。この場合におけるウェブとは、インターネットやイントラネット上を意味します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

1回答

0グッド

0クリップ

191閲覧

投稿2022/12/01 07:38

前提

SVGをcanvasを使用して画像に変換していますが、
以下の時、<text ...> の font-family が画像に反映されません。

  • svg の中で <text ...> を使用している
  • font-family は、adobe font である
  • 日本語フォント (ex. kozuka-mincho-pro)
  • adobe font は、Web プロジェクトページ で生成される script タグを使用して埋め込み

※他の自作フォントは、blob化することで、画像にもfont-familyが反映できています。
※ブラウザ上(SVGの時点)では、adobe font の font-family も反映されています。

何か知見ありましたら、アドバイスいただけると幸いです。
よろしくお願いいたします。

実現したいこと

最終的に、

  • canvasで生成した画像で、<text ...>の font-familyが適用されていること
  • 例えば、kozuka-mincho-pro

  • blob化したら解決しそうなので、adobe fonts を blob化したい

発生している問題・エラーメッセージ

SVGをcanvasで画像(png)に変換したときに、
font-familyが適用されず、デフォルト?のフォントスタイルになってしまう。

該当のソースコード

classに、.sample を指定しています。

svg

1<svg ...> 2 ... 3 <text font-size="12" x="0" y="0" 4 class="sample" fill="#ffffff" rorate="0" text-anchor="middle" 5 dominant-baseline="central" 6 > 7 サンプルテキスト 8 </text> 9</svg>

試したこと

1) blob化
canvasでfont-familyを適用するには、blobにする必要があるとの、記事を見ましたので
試してみました。(adobe以外のサーバーにある自作フォントは、これで解決済)

※xxxxxxx.js は 仮です。 実際は、adobeのkitIdが入ります。

js

1 2 const svg = document.getElementById("svg_sample") 3 const style = svg.getElementsByTagName("style")[0] 4 5 const json = await axios.get(https://use.typekit.net/xxxxxxx.js, { responseType: 'blob' }) 6 const data = json.data 7 const blob = new Blob([data], {type: "font/woff;charset=utf-8"}) 8 9 let reader = new FileReader() 10 reader.readAsDataURL(blob) 11 12 reader.onload = () => { 13 const dataURL = reader.result 14 const font_face_css = `@font-face { font-family: sample; src: url("${dataURL}"); }` 15 const font_class = `.sample { font-family: sample; }` 16 const add_html = `${font_face_css} ${font_class}` 17 18 style.insertAdjacentHTML('beforeEnd', add_html); 19 }

画像どころか、ブラウザ上でもfont-familyが反映されません。

2)text に 直接 font-family 指定

js

1const svg = document.getElementById("svg_sample") 2const textEls = svg.getElementsByClassName(`sample`) 3const targetTextEl = textEls[0] 4targetTextEl.setAttribute("font-family", "kozuka-mincho-pro")

svg

1 <text font-size="12" x="0" y="0" 2 class="sample" fill="#ffffff" rorate="0" text-anchor="middle" 3 dominant-baseline="central" 4 font-family="kozuka-mincho-pro" // ここが追加されます 5 > 6 サンプルテキスト 7 </text>

blobにしてないので、canvas処理ではfont-familyが反映されない?

補足情報(FW/ツールのバージョンなど)

Vue 3.0
SVGを画像にする方法はこちらを参考にしています(成功しています)
: https://blog.asial.co.jp/1615

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

axios.get(https://use.typekit.net/xxxxxxx.js,

JavaScript のソースコードを data: URL にしてもフォントデータとしては動きませんね。

SVG内の<style>内で @import でフォントを指定するとどうでしょうか。

投稿2022/12/01 08:02

編集2022/12/01 08:05
int32_t

総合スコア17085

yooonb❤️を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

yooonb

2022/12/01 09:06

回答ありがとうございます。 > JavaScript のソースコードを data: URL にしてもフォントデータとしては動きませんね。 JSを変換しても、フォントデータとして使用できないとのこと理解しました。 > SVG内の<style>内で @import でフォントを指定するとどうでしょうか。 adobeの「日本語フォント」を使用している時点で、 @import で使用するリンクがadobeから提供されず、 使用できないようです。 ■詳細 このURLにある 「@import 埋め込みコード」部分のように、指定するはずですが、 https://helpx.adobe.com/jp/fonts/using/embed-codes.html 東アジア言語では、JavaScript 埋め込みコードしか提供されない
int32_t

2022/12/01 09:18

> 東アジア言語では、JavaScript 埋め込みコードしか提供されない では、実現不可能だと思います。SVG を <img> や Image 経由で描画する場合はJavaScriptを動かす手段がありません。
yooonb

2022/12/01 09:24

> SVG を <img> や Image 経由で描画する場合はJavaScriptを動かす手段がありません。 ありがとうございます。 blobにするのは、実現不可能ということが分かり少しすっきりしました。 int32_t様から回答をいただき、 以下の理由で、別のアプローチが必要なのかなと考えましたので、 画像にadobe fontが反映される方法をもう少し模索してみます。 - adobeからは、blob化に使えそうなリンクが提供されない - JSコード を data: URL してもフォントデータとして動かない ※検討: <text ...> (可変) を、JS で svg の path に変換する 回答いただきありがとうございました。
int32_t

2022/12/01 09:34

あ、でも、adobeが提供するJavaScriptを実行した結果、何かのURLにアクセスしてフォントデータを取ってきているはずなので、そのURLからblob化はできるかもしれません。 そういうリバースエンジニアリングや正規ではないアクセス方法をabobeが許諾しいてるかどうかは知りませんが。
yooonb

2022/12/01 11:08

ありがとうございます。 なるほど、その考えは思い浮かびませんでした。 adobe がアクセスしてるであろうURLを探します。 (jsの中身を見てそれらしいものは、ありましたが、解読まで至っていません。) > そういうリバースエンジニアリングや正規ではないアクセス方法をabobeが許諾しいてるかどうかは知りませんが。 こちらも調べてみます。 また、フォントについてadobe公式にも問い合わせてみます。 進展あったら、ご報告します。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

ウェブアプリケーション

ウェブアプリケーションとは、ウェブ上でアクセスされるアプリケーションのことを呼びます。この場合におけるウェブとは、インターネットやイントラネット上を意味します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。