web-dev-qa-db-ja.com

JavaScriptを介したフォントフェースの変更

したがって、基本的なワークフローは次のとおりです。

  1. フォントの非同期ファイルアップロード（これはすでに実行されています）。

  2. URLを取得します（完了）。

  3. フォントを新しいURLに変更します。

これはfont-faceを介して行う必要があることは理解していますが、JavaScriptを介してアクセスする方法がわからないようです。

javascriptcssfontsfont-face
19
user798080

<style>ルールを使用して新しい@font-face要素を作成し、それをdocumentのheadに追加できます。

var newStyle = document.createElement('style');
newStyle.appendChild(document.createTextNode("\
@font-face {\
    font-family: " + yourFontName + ";\
    src: url('" + yourFontURL + "') format('yourFontFormat');\
}\
"));

document.head.appendChild(newStyle);

もちろん、最新のデスクトップブラウザのサポートだけを心配しているのでない限り、必要なすべてのフォント形式とURLも提供する必要があります（この場合、WOFFを使用するだけです。これは合理的だと思います。あなたが言及した他の機能）。

31
Ry-

FontFaceオブジェクトを定義します：

new_font = new FontFace('conthrax', 'url(fonts/conthrax-sb.ttf)')

loadメソッドを呼び出してフォントをダウンロードします：

new_font.load().then(function(loaded_face) {
    // use font here

}).catch(function(error) {

});

...これはPromiseを返します。これは、解決されると、ロードされたFontFaceを渡します。

ロードされたフォントをドキュメントに追加します：

new_font.load().then(function(loaded_face) {
    // use font here
    document.fonts.add(loaded_face)
}).catch(function(error) {

});

必要に応じてフォントを使用します（例： Azle ）：

az.style_text('my_title', 1, {
    "font-family" : "conthrax"
})
4
Cybernetic