SVG文件自定義字體不在html中顯示

Question

我的目標是：在Chrome（Electron）的html頁面中將SVG打印到單個頁面（任何紙張大小）的完整大小。

我竭力要實現這一目標，這是我的故事：

我產生有它的文本應與特定的字體顯示SVG。這是一個自定義字體，我包含在CSS（使用字體松鼠），也用於網站的文字。當我在內聯網顯示SVG時，字體呈現正常。

內聯意味着它是一個元素，是你可以檢查的dom的一部分。問題在於，如果不必重新渲染svg，您無法真正改變寬度樣式。因爲我想打印它，所以只需'寬度= 100％'即可。

爲此，我將SVG序列化爲dataURL並使用並將其src設置爲dataURL。現在我可以像我想要的那樣設置寬度。但是：自定義字體不再工作了！

所以我將SVG img保存到文件進行編輯。顯然你可以在SVG中包含css，這就是我所做的。然後當你在瀏覽器中直接打開文件時，它會再次正常工作。但是，當您在網頁中的IMG中打開它時，字體不再有效。

接下來，我試圖直接複製svg字體到文件（字形的東西...）。是的，這工作！哦，不，它不會，只是在Safari瀏覽器不在Chrome瀏覽器中，該死的。

現在我正在考慮對它進行柵格化，但這當然不是完美的解決方案。

正如你所理解的，我在這裏感到有些沮喪。任何人都可以給我一個關於SVG字體問題的見解，或者您有關於打印的任何提示嗎？

Answer 1

好吧，我找到了一個解決方案。

事實證明，出於安全原因，IMG元素中引用的文件不能包含任何外部文件。所以這就是爲什麼在將它顯示爲IMG時引用SVG中的CSS不起作用的原因。

此外，Chrome還放棄了對SVG字體的支持。所以，即使你將SVG字形數據複製/粘貼到SVG圖像中，它仍然不起作用（真的很愚蠢）。在Safari中，這個工程雖然。

所以你需要在css中引用WOFF字體作爲dataURL（base64）。我之前嘗試過，但顯然我做錯了。我再次嘗試它，它的作品:)。

我使用FontSquirrel來生成這個，我也在那裏設置了字體的子集，只包含我實際上需要節省空間的字符。

當然不是非常有效的複製字體而不是引用，但我可以忍受這一點。