將SVG字體字形嵌入獨立HTML文件中

我想在HTML文件中使用Font Awesome中的單個字形。我想創建沒有外部依賴關係的HTML文件，所以我希望聲明的style@font-face和字符的SVG定義成爲HTML文件的組成部分。將SVG字體字形嵌入獨立HTML文件中

這是我曾嘗試（jsfiddle），但自定字形沒有出現：

<!DOCTYPE html> 
<head> 
    <style> 
    @font-face { 
     font-family: "Custom"; 
     src: local("Custom"), url("fonts.svg#font") format("svg"); 
    } 
    a { 
     text-decoration: none; 
     font-family: Custom; 
    } 
    </style> 
</head> 

<body> 
<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    display="none"> 

    <defs> 
    <font id="font"> 
     <font-face font-family="Custom" /> 
     <glyph 
     glyph-name="undo" 
     unicode="@" 
     d="m857 350q0-87-34-166t-91-137-137-92-166-34q-96 0-183 41t-147 114q-4 6-4 13t5 11l76 77q6 5 14 5 9-1 13-7 41-53 100-82t126-29q58 0 110 23t92 61 61 91 22 111-22 111-61 91-92 61-110 23q-55 0-105-20t-90-57l77-77q17-16 8-38-10-23-33-23h-250q-15 0-25 11t-11 25v250q0 24 22 33 22 10 39-8l72-72q60 57 137 88t159 31q87 0 166-34t137-92 91-137 34-166z" horiz-adv-x="857.1" /> 
    </font> 
    </defs> 
</svg> 

<a href="#undo">@</a> 
</body> 
</html>

我有什麼省略或錯了？或者我想做一些不被支持的東西？

來源

2015-10-29 James Newton

你用什麼瀏覽器來做到這一點？你的小提琴在Safari上運行良好。

看看這個從MDN雖然https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts

SVG字體目前只在Safari和Android瀏覽器的支持。 Internet Explorer已經不被認爲是實現這一點，功能已經從Chrome 38版（和Opera 25）移除，火狐已推遲其實施無限期地對WOFF集中。其他工具，但像Adobe的SVG瀏覽器插件，蠟染和Inkscape的支持SVG字體的部分嵌入

來源

2015-10-29 21:53:09

啊。好。很高興知道我的語法正確：） –

@JamesNewton嘗試下載Font Awesome代碼，只取出它不需要的部分。它使用css將內容添加到'：before'，因此它可以在多個瀏覽器中工作，然後您可以按照Font Awesome指令來實現您的圖標。 –

將SVG字體字形嵌入獨立HTML文件中

回答

相關問題