首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将SVG字体字形嵌入到独立的HTML文件中

将SVG字体字形嵌入到独立的HTML文件中
EN

Stack Overflow用户
提问于 2015-10-29 20:53:31
回答 1查看 1.8K关注 0票数 2

我想在HTML中使用字体太棒了中的单个字形。我想要创建没有外部依赖项的style文件,所以我希望@font-face声明和字符的SVG定义是HTML文件的组成部分。

下面是我尝试过的(小提琴),但是没有出现自定义的字形:

代码语言:javascript
运行
复制
<!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>

我遗漏了什么或者错了什么?还是我想做一些不受支持的事情?

EN

回答 1

Stack Overflow用户

发布于 2015-10-29 21:53:09

你用什么浏览器来做这件事?你的小提琴在Safari很好用。

通过字体从MDN查看这个

SVG字体目前只支持Safari和Android浏览器。Internet还没有考虑实现这个功能,它的功能已经从Chrome 38 (和Opera 25)中删除,Firefox已经无限期地推迟了它的实现,以便集中精力在WOFF上。不过,其他工具,如插件、Batik和Inkscape的部分支持SVG字体嵌入

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33424398

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档