Браузеры с ленивой загрузкой шрифтов с FontFace

Question

Итак, я разрабатываю простую веб-игру с Canvas API.Мне нужно рисовать символы на холсте, используя указанные шрифты.

В процедуре загрузки я использую обещания, чтобы дождаться нужных мне шрифтов, например:

Promise.all([
    (new FontFace("LCD Solid", "url('assets/LCD_Solid.ttf')")).load().then((font)=>{
        document.fonts.add(font)
    }, (err)=>{
        throw {type: "font_loading_err", fontName: "LCD Solid", DOMException: err}
    }),
    (new FontFace("Conformity", "url('assets/Conformity.ttf')")).load().then((font)=>{
        document.fonts.add(font)
    }, (err)=>{
        throw {type: "font_loading_err", fontName: "Conformity", DOMException: err}
    }),
]).then(loadGame, oops)

Обещания разрешены, но не загружен.Chrome и Firefox загружают их только тогда, когда я использую fillText(), создавая некоторые кадры со шрифтом с засечками по умолчанию, пока шрифт не загружается в Chrome.

Согласно спецификации обещания должны толькоразрешается при загрузке шрифтов, но также допускает отложенную загрузку.

Есть ли способ избежать отложенной загрузки шрифтов и заставить браузер загружать их в этот момент?

Answer 1

Я думаю, FontFaceObserver может хорошо сработать для вас. Вы по-прежнему можете загружать шрифты с помощью JS API или обычного @font-face CSS API, и FontFaceObserver поможет вам вызвать что-то еще, когда шрифт загружен.

Вот полный пример сочетания вашего кода и примера нескольких шрифтов из README FontFaceObserver:

<canvas id="js-canvas"></canvas>
<script src="https://unpkg.com/fontfaceobserver@2.1.0/fontfaceobserver.standalone.js"></script>
<script>
var exampleFontData = {
  'Family A': { weight: 400, src: 'url(assets/FamilyA-Regular.woff2), url(assets/FamilyA-Regular.woff)' },
  'Family B': { weight: 400, src: 'url(assets/FamilyB-Regular.otf)' },
  // Etc.
}

var observers = []
var fonts = []

// Make one Observer along with each font
Object.keys(exampleFontData).forEach(function(family) {
  var data = exampleFontData[family]
  var obs = new FontFaceObserver(family, data)
  var font = new FontFace(family, data.src)

  observers.push(obs.load())
  fonts.push(
    font
      .load()
      .then((f) => {
        document.fonts.add(f)
      }, (err) => {
        throw {type: "font_loading_err", fontName: family, DOMException: err}
      })
  )
})

Promise.all(fonts)
.then(() => {
  console.log('Use the canvas')
  var canvas = document.getElementById('js-canvas')
  canvas.width = 750
  canvas.height = 500
  var ctx = canvas.getContext('2d')

  ctx.font = '36px "Family A"'
  ctx.fillText('HELLO USING FONT', 20, 50)

  ctx.font = '36px "Family B"'
  ctx.fillText('Hello using font', 20, 150)
}, (err) => {
  console.error(err)
})
</script>

Надеюсь, это полезно!