用JS怎么设置 @font-face ？谢谢啊

初学额 2019-12-12 10:00:06

@font-face {
font-family:"tt1";
src:url('tt1.ttf');
}

用JS怎么设置 font-family 和 src:url里的值呢？
希望能动态的设置字体，有办法吗？

谢谢啊！

...全文

312 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

初学额 2019-12-12

打赏
举报

回复

有大哥懂这个吗？给个提示吧

初学额 2019-12-12

打赏
举报

回复

需要引入50种字体甚至更多，所以写太多不是很好
而且使用起来很不方便

JiexC0la 2019-12-12

打赏
举报

回复

为什么要动态设置@font-face呢，如果只是想改变字体，写多个@font-face，根据不同场景引用不同字体就行了

前端开源库-stylus-font-face手写笔字体，@font face生成器手写笔插件

喜欢网页布局的朋友对font-face并不陌生吧，使其可以改变网页字体，下面有个不错的示例，大家可以参考下

broccoli-sass-font-face 这是一个插件，用于轻松生成@font-face规则。安装 npm install --save-dev broccoli-sass-font-face 用法假设您的项目的webpub/fonts目录中有几种字体： ~/project/$ ls -C webpub/fonts headers.eot headers.ttf headers.woff headers_bold.eot headers_bold.ttf headers_bold.woff 添加你的 Brocfile.js var fontFace = require ( 'broccoli-sass-font-face' ) ; // This prefix will be removed from the each font URL: fontFace . font

字体使用是网页设计中不可或缺的一部分。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：1. 不可能大范围的使用该字体；2. 图片内容相对使用文字不易修改；3. 不利于网站SEO（主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素）。网络上有一些使用sIFR技术、或javascript/flash hack的方法，但实现起来或繁琐，或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。第一步

61,129

社区成员

60,711

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章