Embed SVG font glyph in a standalone HTML file
Question
I want to use a single glyph from Font Awesome in an HTML file. I want to create the HTML file with no external dependencies, so I would like the style @font-face declaration and the SVG definition of the character to be integral parts of the HTML file.
Here's what I have tried ( jsfiddle ), but the custom glyph does not appear:
<!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>
What have I omitted or got wrong? Or am I trying to do something that is not supported?
1 answers
solution1
2 2015-10-29 21:53:09
What browser are you using to do this? Your fiddle works fine in Safari.
Check out this from MDN though https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts
SVG Fonts are currently supported only in Safari and Android Browser. Internet Explorer hasn't considered implementing this, the functionality has been removed from Chrome 38 (and Opera 25) and Firefox has postponed its implementation indefinitely to concentrate on WOFF. Other tools however like the Adobe SVG Viewer plugin, Batik and parts of Inkscape support SVG font embedding
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.