第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

我如何將谷歌字體中的字體導(dǎo)入 javascript,以便我可以將它用于我的畫布?

我如何將谷歌字體中的字體導(dǎo)入 javascript,以便我可以將它用于我的畫布?

慕斯709654 2021-11-25 19:37:57
我正在嘗試將 google 字體導(dǎo)入 javascript,因此我可以使用這些字體在畫布上繪制文本。問題是我收到錯(cuò)誤。錯(cuò)誤1:無法解碼下載字體錯(cuò)誤2:OTS解析錯(cuò)誤這是針對(duì)我正在開發(fā)的網(wǎng)頁,我查找了問題,但他們建議的解決方案,我不明白。<!DOCTYPE html><html lang = "en">    <body>        <canvas id="canvas" width="400" height="400"></canvas><script>var c = document.getElementById("canvas");var ctx = c.getContext("2d");var pacifico_font = new FontFace('Pacifico', 'url(https://fonts.googleapis.com/css?family=Pacifico&display=swap)');pacifico_font.load().then(function(loaded_face) {    document.fonts.add(loaded_face);    document.body.style.fontFamily = '"Pacifico", Pacifico';}).catch(function(error) {    alert("An error occured, please continue.");});document.fonts.ready.then(function(font_face_set) {    var x = true;    return x;});ctx.fillStyle=rgb(0,0,0);if(x===true){ctx.font="20px Pacifico";ctx.fillText("Hello Cody(testing)",200,200);}</script></body></html>我希望畫布顯示文本,但它提醒我有錯(cuò)誤,并且什么也沒有。在控制臺(tái)中它說:無法解碼下載的字體:https://fonts.googleapis.com/css ? family = Pacifico & display = swap OTS 解析錯(cuò)誤:版本標(biāo)簽無效
查看完整描述

2 回答

?
炎炎設(shè)計(jì)

TA貢獻(xiàn)1808條經(jīng)驗(yàn) 獲得超4個(gè)贊

您正在加載樣式表而不是字體。


這是解決方案:


    <!DOCTYPE html>

    <html lang = "en">

    <head>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico&display=swap">

    </head>

        <body>

            <canvas id="canvas" width="400" height="400"></canvas>

            <!--window.onload won't work without this because there is nothing waiting for the link to load-->

            <span id="loader" style="font-family: Pacifico;">I am used for loading</span>

    <script>

    var c = document.getElementById("canvas");

    var ctx = c.getContext("2d");

    ctx.fillStyle="rgb(0,0,0)";

    window.onload = function() {

      document.getElementById("loader").style.display="none"

      ctx.font="20px Pacifico";

      ctx.fillText("I am inside of canvas",200,200);

      ctx.stroke();

    }

    </script>

    </body>

    </html>


查看完整回答
反對(duì) 回復(fù) 2021-11-25
?
慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

您使用的字體鏈接實(shí)際上是指向樣式表的鏈接。


您可以通過訪問樣式表鏈接來獲取字體的直接鏈接。


它將顯示以下 CSS:


/* cyrillic-ext */

@font-face {

  font-family: 'Pacifico';

  font-style: normal;

  font-weight: 400;

  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6K6MmBp0u-zK4.woff2) format('woff2');

  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;

}

/* cyrillic */

@font-face {

  font-family: 'Pacifico';

  font-style: normal;

  font-weight: 400;

  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6D6MmBp0u-zK4.woff2) format('woff2');

  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

}

/* vietnamese */

@font-face {

  font-family: 'Pacifico';

  font-style: normal;

  font-weight: 400;

  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6I6MmBp0u-zK4.woff2) format('woff2');

  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;

}

/* latin-ext */

@font-face {

  font-family: 'Pacifico';

  font-style: normal;

  font-weight: 400;

  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6J6MmBp0u-zK4.woff2) format('woff2');

  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Pacifico';

  font-style: normal;

  font-weight: 400;

  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

只需獲取您想要使用的任何字體版本的鏈接,然后將其添加到您當(dāng)前添加樣式表的位置即可。


查看完整回答
反對(duì) 回復(fù) 2021-11-25
  • 2 回答
  • 0 關(guān)注
  • 163 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)