0
114
ViewsSafari 15.2 Canvas y fuentes .otf
Tengo un problema al cargar fuentes .otf en la última versión de Safari 15.2. Este mismo código solía funcionar bien en versiones anteriores del mismo navegador y todavía funciona bien en otros navegadores.
Una de las fuentes problemáticas con las que experimento el problema es Adobe Gilbert .
Intenté cargar el archivo de fuente de dos maneras diferentes:
@font-face { font-family: gcb; src: url(/assets/fonts/Gilbert-Color-Bold-Preview5.otf); }y
var selectedFont = new FontFace('gcb', 'url(/assets/fonts/Gilbert-Color-Bold-Preview5.otf)'); selectedFont.load().then(function(font) { document.fonts.add(font); }); (async () => { const fontURL = "https://cdn.jsdelivr.net/gh/Fontself/TypeWithPride@master/fonts/Gilbert-Color%20Bold%20Preview_1005.otf"; const selectedFont = new FontFace('gcb', 'url(' + fontURL + ')'); await selectedFont.load(); document.fonts.add(selectedFont); const canvas = document.querySelector("canvas"); ctx = canvas.getContext("2d", { alpha: false }); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, 300, 30); ctx.font = "15pt gcb"; ctx.fillStyle = '#000'; ctx.fillText("I'm a canvas", 0, 20); ctx.font = "15pt sans-serif"; ctx.fillText(", right?", 105, 20); })().catch(console.error) span, text { font: 15pt gcb; } <canvas height=30></canvas><br> <span>I'm a span</span><br> <svg height=30><text y="15">I'm an SVG</text></svg>En Safari no obtengo nada dibujado en el lienzo:
Mientras que en Chrome obtengo el texto en negro, y en Firefox el texto en color como se esperaba .
¿Cómo puedo hacer que Safari al menos represente el texto como Chrome?
1 answers
Answer question0
Entonces, primero, esto parece afectar solo a las fuentes coloreadas, pude dibujar la versión no coloreada de la misma fuente (también en .otf ) en Safari sin problemas.
Entonces, eso es un error, siéntase libre de informar a la gente de Safari sobre esto en su rastreador de problemas .
Desafortunadamente, no hay mucho que puedas hacer.
El único truco que se me ocurre sería representar una imagen SVG en su lienzo donde se dibujaría el texto.
Para hacerlo, primero tendría que obtener la fuente y generar una versión de URL de datos para que pueda incrustarse en un documento SVG independiente que cargaría en un HTMLImageElement para dibujarlo en el lienzo.
Realmente, eso es un truco, pero dado que todavía pueden renderizar esa fuente a través de su renderizador SVG, eso funciona:
(async () => { const fontURL = "https://cdn.jsdelivr.net/gh/Fontself/TypeWithPride@master/fonts/Gilbert-Color%20Bold%20Preview_1005.otf"; const fontRes = await fetch(fontURL); if (!fontRes.ok) { throw new Error("failed to load"); } const fontBlob = await fontRes.blob(); const dataURL = await new Promise((res) => { const reader = new FileReader(); reader.onload = () => res(reader.result); reader.readAsDataURL(fontBlob); }); const svgNode = document.querySelector("svg").cloneNode(true); const style = document.createElementNS("http://www.w3.org/2000/svg", "style"); style.textContent = ` @font-face { font-family: gcb; src: url("${ dataURL }") format("opentype"); } text { font: 15pt gcb; } `; svgNode.prepend(style); svgNode.querySelector("text").textContent = "I'm a svg drawn in a canvas"; const markup = new XMLSerializer().serializeToString(svgNode); const svgBlob = new Blob([markup], { type: "image/svg+xml" }); const img = new Image; await new Promise((res, rej) => { img.onload = e => setTimeout(res, 100); // webkit fires load before inner fonts are loaded... img.onerror = rej; img.src = URL.createObjectURL(svgBlob); }); const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d", { alpha: false }); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, 300, 30); ctx.font = "15pt gcb"; ctx.drawImage(img, 0, 0); })().catch(console.error) span, text { font: 15pt gcb; } @font-face { font-family: gcb; src: url(https://cdn.jsdelivr.net/gh/Fontself/TypeWithPride@master/fonts/Gilbert-Color%20Bold%20Preview_1005.otf) format("opentype"); } <canvas height=30></canvas><br> <span>I'm a span</span><br> <svg height=30 width="300"><text y="15">I'm an SVG</text></svg>