个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
24
4
我有一个要分发的独立 HTML 文档，没有任何外部依赖项。我在本文档中使用了只有我的一些用户会安装的非标准字体。
对于那些没有安装字体的用户，我在 <body> 顶部的嵌入式 SVG 文档中包含了一份字体副本。 . (我在这个例子中使用的是单字形字体，真实文档使用的是完整的字体。)
<svg style="display: none;"><defs>
<font id="MyFontElement">
<font-face font-family="MyFont" />
<glyph unicode="A" horiz-adv-x="950" d="M0,0L0,100L100,100L100,200L0,200L0,300L100,300L100,400L200,400L200,500L300,500L300,600L400,600L600,600L600,500L700,500L700,400L800,400L800,300L900,300L900,200L800,200L800,100L900,100L900,0L600,0L600,100L700,100L700,200L800,200L800,300L100,300L100,200L200,200L200,100L300,100L300,0L0,0M300,400L600,400L600,500L300,500L300,400Z" />
</font>
</defs></svg>
SVG 字体看起来不如普通字体好看，所以我只想在本地没有安装字体的情况下使用 SVG 字体。如果字体是在外部 SVG 文档中定义的，我可以以低于本地安装字体的优先级使用它，如下所示:( fiddle )
<style>
@font-face {
font-family: "My Font";
src: local("My Font"), url("fonts.svg#MyFontElement") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
不幸的是，所有明显的变体似乎都不适用于当前文档中的字体:( fiddle )
src: local("My Font"),
url("./#MyFontElement") format("svg"),
url("./#MyFontElement"),
url("#MyFontElement") format("svg"),
url("#MyFontElement");
即使没有 @font-face声明，该字体在文档中已经可用为 MyFont , font-family在 <font-face /> 中指定.但是，这将以比名为 MyFont 的 native 字体更高的优先级使用。 , 所以这不是解决方案。
我希望我可以将其称为 local("MyFont") ... ( fiddle )
src: local("My Font"), /* local */
local("MyFont"); /* embedded */
...但这也不起作用。
我可以给嵌入字体一个不同的名称并以较低的优先级使用它，style="font-family: LocalFont, EmbeddedFont" ，但我允许用户将本地文件中的片段导入到文档中，这些本地文件将仅通过标准名称引用字体。导入时可以重写这些引用，但我不喜欢这种解决方案。
如何从 @font-face 引用当前文档中嵌入的 SVG 字体声明？
最佳答案
将字体转换为数据 URI 并将其嵌入到 CSS 声明中:( fiddle )
<style>
@font-face {
font-family: "My Font";
src: url("data:application/octet-stream;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+CiAgPGZvbnQgaWQ9Ik15Rm9udEVsZW1lbnQiPgogICAgPGZvbnQtZmFjZSBmb250LWZhbWlseT0iTXlGb250IiAvPgogICAgPGdseXBoIHVuaWNvZGU9IkEiIGhvcml6LWFkdi14PSI5NTAiIGQ9Ik0wLDBMMCwxMDBMMTAwLDEwMEwxMDAsMjAwTDAsMjAwTDAsMzAwTDEwMCwzMDBMMTAwLDQwMEwyMDAsNDAwTDIwMCw1MDBMMzAwLDUwMEwzMDAsNjAwTDQwMCw2MDBMNjAwLDYwMEw2MDAsNTAwTDcwMCw1MDBMNzAwLDQwMEw4MDAsNDAwTDgwMCwzMDBMOTAwLDMwMEw5MDAsMjAwTDgwMCwyMDBMODAwLDEwMEw5MDAsMTAwTDkwMCwwTDYwMCwwTDYwMCwxMDBMNzAwLDEwMEw3MDAsMjAwTDgwMCwyMDBMODAwLDMwMEwxMDAsMzAwTDEwMCwyMDBMMjAwLDIwMEwyMDAsMTAwTDMwMCwxMDBMMzAwLDBMMCwwTTMwMCw0MDBMNjAwLDQwMEw2MDAsNTAwTDMwMCw1MDBMMzAwLDQwMFoiIC8+ICAgIAogIDwvZm9udD4KPC9kZWZzPjwvc3ZnPgo=") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
有一个警告:您不能将 ID 说明符 (#MyFont) 与这样的数据 URI 一起使用。因此，您只能在编码文件中使用一种字体，而不是使用多种字体并单独引用它们。 (这不是您想要的；在每种字体的声明中复制多种嵌入字体的数据会浪费大量空间。)
关于html - 将@font-face 与嵌入在当前 HTML 页面中的 SVG 字体一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11438150/
24
4
0
将以下内容添加到我的键绑定(bind)中可以让我将 Sublime Text 3 中的字体大小重置为默认大小: { "keys": ["ctrl+0"], "command": "reset_font
我有一个如下所示的 css 字体系列(由于显示限制，我已经缩短了它，否则它比我在这里展示的要大得多)现在你能告诉我是否有办法将 url()content 转换为 .ttf 字体格式或其他标准字体格式吗
具体来说... and ...显示为双倍或四倍。 最佳答案 Customize Twitter Bootstrap here. Make sure to uncheck the default "
当包含 @font-face 和 src 以导入网络字体时，我注意到您可以传入 2 个可选值。我目前不这样做。 我有 2 种网络字体，Lato Regular 和 Lato Bold。 我应该在 @f
我正在本地主机上测试一个字体很棒的网站，它工作正常；但是当我将它上传到我的远程站点时，它不再显示字体了。我该如何解决？尝试了所有调试但没有成功。 网站在那里 www.sevotec.it/ordine
我开始使用 font-squirrel (http://www.fontsquirrel.com/tools/webfont-generator) 来快速使我的字体跨浏览器兼容，我只是想知道字体质量是
以前我复制了一个ttf文件到C:\Windows\Fonts，点击文件显示字体，然后点击[安装]，一切正常。 当我现在执行此过程时，字体未安装在 C:\Windows\Fonts 中，而是安装在 C:
我注意到，在工作中，Google Web字体未出现在IE9和Firefox 6(Windows和Mac OS)上。所有文件都已加载，但字体从未渲染。在那些相同的浏览器上，它可以在家正常工作。 Chro
我正在学习 Swift UI 教程，我遇到了这个错误，而讲师没有。 .font 错误在第一个 Vstack 中仅出现一次，而第二次则没有问题。 import SwiftUI struct Conten
我知道使用@font-face 允许浏览器下载自定义字体并在网页中使用它，就像使用任何系统字体一样。 我想知道的是浏览器是对字体进行编码还是在不公开的情况下使用它？ 谢谢 最佳答案 浏览器无法保护字体
使用基于@font-face 标记的标准fontsquirrel .. 字体呈现在较粗的一面。下面是一个屏幕截图，以几种不同的方式展示了字体。顶部是 photoshop 的渲染图，第二个是相同字体的
我必须在元素中使用花哨的字体，但我真的很想避免使用 sifr 和其他丑陋的替代品，所以我正在寻找@font-face。 但是，我真的很困惑几个博客/网站提供了关于它的可用性的不同观点。准备好了吗？目前
我几乎在我工作的所有项目中都使用 fontawesome。但这次我得到的图标显示为正方形。我还尝试了 stackoverflow 上列出的几乎所有解决方案，但似乎对我的情况没有任何效果。我猜是什么东西
好的，所以我正在尝试让 IE9 显示字体 Agenda。我像往常一样去了 fontsquirrel，它说 font bureau 不允许他们创建字体套件。然后我去了 codeandmore 并在那里制
Font Awesome 4.0是对 Font Awesome 从头开始的完全重写。主要的新功能之一是图标现在具有命名空间。除了命名空间之外，图标还使用基于一致性和可预测性的新命名约定。不幸的是，
我使用版本 3.2.9 (Media Mark) 的 SASS 并且我想使用我的自定义 font-family 的 3 个变体Source Sans Pro 字体(Light、Regular、Bold
在一些 css 文件中嵌入一些 base64 字体，但 CSP 阻止了这些:类似于 url("data:font/woff;base64,d09GRk9UVE...); 当前 CSP =“base-u
我怎样才能使 Font Awesome 图标像本页中那样大: http://fontawesome.io/icon/bath/ 我使用了 fa-5x 类，但它与页面示例中最大的图标不同。 下面是我使用
我有一个带有Bootsrap 4(SASS)和Font Awesome 5的MVC项目。我正在尝试使旋转的图标可以与Ajax加载面板一起使用，但是它不起作用。 Test Spin
似乎 font-awesome 支持自定义图标，并附有详细说明如何创建和提交您自己的图标，但该信息在他们的网站上不再可用。这是否意味着不再支持此功能并且您只能请求由 font-awesome 团队完成
我是一名优秀的程序员,十分优秀！