如何在Stylus中优雅地添加自定义字体而不覆盖原有字体？
霞舞
发布： 2025-03-08 08:48:14
原创
1052人浏览过
在stylus中优雅地添加自定义字体，避免覆盖原有字体
许多开发者在使用CSS时，需要在现有字体列表中添加自定义字体，而不会覆盖原有字体设置。本文介绍如何使用Stylus和JavaScript实现这一目标，保持代码简洁易维护。
假设网页已设置font-family: -apple-system, BlinkMacSystemFont;，而开发者希望在前面添加自定义字体my-custom（通过@font-face规则定义）。直接覆盖font-family属性会丢失原有字体，因此需要更优雅的方案。
在CSS中直接操作font-family属性较为复杂，需要解析和拼接字符串。更简洁的方法是利用JavaScript获取并修改font-family属性。
以下代码片段演示如何通过JavaScript获取元素的font-family属性，并在其前面添加MyCustom字体：
const el = document.body;
const prevFontFamily = getComputedStyle(el).getPropertyValue('font-family');
el.style.fontFamily = 'MyCustom, ' + prevFontFamily;登录后复制
代码首先获取document.body元素的计算样式中的font-family值，然后将MyCustom添加到该值的前面，并更新元素的fontFamily样式。 此方法在运行时修改DOM元素样式，而非直接在Stylus中操作CSS。 在Stylus中直接操作需要更复杂的字符串处理，降低代码可读性和可维护性。
以上就是如何在Stylus中优雅地添加自定义字体而不覆盖原有字体？的详细内容，更多请关注php中文网其它相关文章！
最佳 Windows 性能的顶级免费优化软件
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
来源：php中文网
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
461
html动画如何翻转_HTML元素翻转（CSS transform/rotateY）动画方法
可通过CSStransform属性实现HTML元素翻转动画。一、使用rotateY实现水平翻转，结合transition添加过渡效果，hover时应用rotateY(180deg)并设置transform-style:preserve-3d保持3D空间。二、利用backface-visibility:hidden隐藏背面，实现卡片双面翻转，避免内容重叠。三、通过@keyframes定义从rotateY(0)到rotateY(360deg)的动画，绑定animation属性实现自动循环翻转，可调整
2025-11-05 09:25:02
html代码如何建站_HTML代码搭建网站全流程与部署方法
用HTML建站需先规划结构，编写页面代码，添加样式与交互，本地测试后通过GitHubPages免费部署上线。1.创建包含首页、关于页等的HTML文件；2.使用文本编辑器编写标准HTML结构并引入CSS；3.添加style.css和script.js提升美观与功能；4.浏览器打开index.html检查链接、图片加载及响应式效果；5.将文件推送至yourname.github.io仓库主分支；6.访问生成的网址即可查看网站。后续可优化视觉、统计访问量或绑定自定义域名。核心是结构清晰、内容完整、部署
2025-11-05 09:23:02
热门推荐
广告
收藏
