前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS全局网站质感字体效果

JS全局网站质感字体效果

作者头像
云白去时衣
发布2022-02-11 14:57:02
3.8K0
发布2022-02-11 14:57:02
举报
文章被收录于专栏:白衣博客白衣博客
效果

使用前效果

Test
Test

使用后效果

Test
Test
代码

默认JS代码

代码语言:javascript
复制
(function() {
var font_style = document.createElement("style");
    font_style.type = 'text/css';
    font_style.innerHTML = " *:not([class*='icon']):not(.fa):not(.fas):not(i) {font-family: 'PingFang SC','Heiti SC','myfont','Microsoft YaHei','Source Han Sans SC','Noto Sans CJK SC','HanHei SC', 'sans-serif' ,'icomoon','Icons' ,'brand-icons' ,'FontAwesome','Material Icons','Material Icons Extended','Glyphicons Halflings'  !important;} *{text-shadow:1px 1px 10px #c3c3c3 !important; font-weight:bold !important;font-family: 'PingFang SC','Microsoft YaHei';}";
document.head.append(font_style);
})();

注意: 如果你设置了自定义字体,需要将上述代码中的 font-family: 定义为你的字体名称或删除,也就是直接使用下边的代码

补充JS代码

代码语言:javascript
复制
(function() {
var font_style = document.createElement("style");
    font_style.type = 'text/css';
    font_style.innerHTML = " *:not([class*='icon']):not(.fa):not(.fas):not(i)  *{text-shadow:1px 1px 10px #c3c3c3 !important; font-weight:bold !important;}";
document.head.append(font_style);
})();

参考文章:壹影博客 https://bk.yyge.net/?post=43

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 默认JS代码
  • 补充JS代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档