如何解决在线网页挂载本地样式的问题

时间 2019-11-09

标签如何解决在线网页本地样式问题栏目 HTML 繁體版

原文原文链接

本文来自网易云社区css

做者：孙有军前端

简单的说，用你的设计为已上线的网站换一套皮肤。在不改变结构的基础上，让本身赏心悦目。web

新年新气象，KS效率控第1篇关于“视觉和前端”如何解决在线网页挂载本地样式的问题。chrome

问题一能不能帮在线网站换肤？

浏览behance的时候，发现这个网站应用了“acumin-pro”字体，对简体中文支持并不友好，基于设计师的追求，心想能不能选一款我本身喜欢的字体呢？安全

修改为工具

经过开发者工具修改CSS，先后对比测试

body {    background-color: #f9f9f9;    color: #2b2b2b;    font-family: "acumin-pro","Helvetica Neue",Helvetica,Arial,ãƒ¡ã‚¤ãƒªã‚ª,Meiryo,"ãƒ’ãƒ©ã‚®ãƒŽè§’ã‚´ Pro W3","Hiragino Kaku Gothic Pro W3",osaka,"ï¼ï¼³ ï¼°ã‚´ã‚·ãƒƒã‚¯","MS PGothic",sans-serif;    font-size: 12px;    line-height: 1.3;}

问题二怎么让网站持久加载自定义样式

开发者工具图一时之快解决了样式问题，可是等到下次刷新的时候以前定义的样式都会被重置，有没有办法让本身的CSS更持久呢。字体

推荐插件 https://finch.io

重点安装chrome插件网站

finch插件解决了这个问题，原理很是简单的，finch利用自定义的css覆盖了原有网站的样式，比如给网站穿上一套定制的衣服。不须要注册也能够正常使用google

实际应用-KS实践者社区的换肤实验

以KS为例，将白色主题界面切换到黑色主题。

GIF动图

最终效果

修改版式后的效果

延展思考

若是咱们将这个“本地换肤”这个概念应用到项目的实际视觉走查中，能够解决多少视觉BUG，视觉还原度，反复修改的效率问题；设想一下：

视觉能够经过最简单修改方式改变网页样式即时获得反馈，甚至都不须要写代码，不须要经历整个开发流程，版本迭代以后在看到改版效果，迅速改善产品视觉层；
前端不再用头疼各类样式规范、尺寸标注了，只要按照视觉的换肤属性，一次性修改样。
最重要的一点这一切都是设计过程都是及时反馈的，所见即所得

网易云免费体验馆，0成本体验20+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区。