html - 直接在 CSS 中嵌入自定义字体

标签 html css fonts font-face

如何在不使用外部文件的情况下在 css 中嵌入自定义字体?

我知道在正常情况下您可以使用以下命令在 css 中创建一个新字体:

@font-face {
    font-family: myFont;
    src: url(myFont.woff);
}

但我想将原始数据作为 src 而不是使用 url(...) .与在 HTML 中使用 <img> 的方式类似标签。在正常情况下,您只需执行以下操作:

<img alt="Cascading Style Sheets" src="//upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/100px-W3C%C2%AE_Icon.svg.png" width="100" height="68" />

但是,您也可以执行以下操作来获得相同的结果:

<img class="img-responsive" src="data:image/gif;base64,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" alt="Cascading Style Sheets" width="100" height="68">

@font-face 是否相同? ?

最佳答案

看来您可以对 woffwoff2 进行 base64 编码,然后像这样将它们放在 @font-face 中:

@font-face {
    font-family: 'Free 3 of 9';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAARwAA0AAAAAFaQAAAQbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCahEICptolyILYAABNgIkA2YEIAWGAgeBDhsTEsguBuyG+kINxUnhJBemDawvJ02Ih+/XXs9deLshYhuViSppAoUkXCfji8Zlqsq6tu5Plc3FmPvNq5sljx6apXkbEPHMERJHSDQvARpHp17IDiiTEpPR9vcC80IzTrKum8lwDB8ALP/HAextb7O3v9kzgmw8CHdBoXGqzlJKFx5LMvt2rzzoFo8T1SG7MT2enEN54s8jvCGYWdNZBRjtMyuEBX71RwwB/65leADA13enqgmt6AcyIaxDKJAh8k7EQUmy2ybu/PRuBmBSMwlSAQKQY2x0xNx+3sAotGOgXS2TTJJQcWi6z8QkMSWNQLIp9uPDuzfXgthGJGPmIrOF6MYgR1FCqhwT8esIA1jv66ddLv1vEwhFYolUJlcoVWqNFoAcrMUZq9MNc9X8/zt8BdIfAGpACCV+L0V5u6X5bUvGxLSelnF9YRjPbGERmkSjMoGUmU3Eo4AsKka3ioTC6SERKK8jXiQc8cgJRkGMXUq5EGPxvnOxatrQKaBoLqK3sxaICfxUb5tnxPN92ZoBa9fmBJITpwMrrViJ2e51a2UIC5Nml9eY9zsP47S0RmU7H9RbBbFE0NjsoJJwRveaQEFQeXzNy2DSjGdN9Gtz8+hJL1ny+DjSD23WCVAfZiHmJMK1PqhPvmI989aT0v1jg7Q2h/kXlBU52x8g5ndGK5W71l49+5HOtVm98q6iTW1vFUylVmLAudZJAsKdoQ5uHeMfkHkcb5PYeBlwQj4+3k3p3DtOSftDkGvzbuh30qmA/Yy7OCQGOL20K6tghuxa5/l4Z/BOx3oVDdnKia550I9Y1RhQu5A2vLuJ2hb2vV/CrS4zoIzOI+z5hHScdz5GCAPa0P4wbzQg8STsJlVD19YEn2mt8O0uUFdLgJ7zrq2BKwVe+bgrW+sYaGwNyL5aY+nHftq2f1jPdyJNh+fvPc/XOu4P79p9WgnaZY0k1B0gSKvyzhmnQWC4mEi1VkzuDmwgwwz4sdHpdVLbgbHJhha/bKbSsLnJkNpCT4xsqTW+2KSOb9dX5jMKoETRhAegZ0O/e5tp99fmDv1tYT5itjQYC5t0xuPLrJyLF+J4QyQwXIYeTDJwcLDh6xhQxivLOKJBNYT2xc34AjQNFQWMpMLXiISIKuJnBnfu0w+Tf4J14AXGHTWiv3z+xox1ntP//bEEcARDLkImfCMUcoA3BdzWxB9RdABcQjCF9orgm4yDVtP4i37/pYqIEsGxkIGWniGCMb7Aseu1kPMwaPWGoryWfYJMmXqSPUnYPXgk93VGfNnZpLLo9UOYyMfVrNBgsoZ9n97q/WAGs8TPHuS945NsgMgil6vU2rTrREBEQkZBRUPHwMTCJiYhJSOnoKSipqGlo2dgZGJmYWVj5+Dk4uZJw3vD8605vAM=) format('woff2'),
        url(data:application/font-woff;charset=utf-8;base64,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) format('woff'),

    font-weight: normal;
    font-style: normal;
}

所以我猜格式应该是 url(data:application/font-woff2;charset=utf-8;base64,[BASE64ENCODEDVALUE]) format('woff2') 并替换 [BASE64ENCODEDVALUE] 为 base64 编码的字符串。

感谢 antfuentes87 为我指明了正确的方向

关于html - 直接在 CSS 中嵌入自定义字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49882271/

相关文章:

javascript - 如何在加载JavaScript之前格式化网页

CSS Ajax 加载器底部居中定位问题

html - 图像在浏览器调整大小时重叠。如何将它们隔开?

css - 编辑 custom.css 以制作响应式版本

html - 如何在 CSS 中使用外部字体

css - 字体系列和字体粗细 - 非常粗的粗体

c++ - MS Sans Serif 在 XP 中无法显示 Unicode 文本,但在 Win7 中可以

javascript - 加载其他函数时,最小-最大过滤器不起作用

jquery - diff 不是函数

javascript - 我如何找到该标签的子项? (HTML+JS)