关键词：
本文来自网易云社区
作者：孙有军
简单的说，用你的设计为已上线的网站换一套皮肤。在不改变结构的基础上，让自己赏心悦目。
新年新气象，KS效率控第1篇关于“视觉和前端”如何解决在线网页挂载本地样式的问题。
问题一 能不能帮在线网站换肤？
浏览behance的时候，发现这个网站应用了“acumin-pro”字体，对简体中文支持并不友好，基于设计师的追求，心想能不能选一款我自己喜欢的字体呢？
修改成
通过开发者工具修改CSS，前后对比
body background-color: #f9f9f9; color: #2b2b2b; font-family: "acumin-pro","Helvetica Neue",Helvetica,Arial,?????¤??a??a,Meiryo,"??’?????????角??′ Pro W3","Hiragino Kaku Gothic Pro W3",osaka,"??-??3 ??°??′??·?????ˉ","MS PGothic",sans-serif; font-size: 12px; line-height: 1.3;
问题二 怎么让网站持久加载自定义样式
开发者工具图一时之快解决了样式问题，但是等到下次刷新的时候之前定义的样式都会被重置，有没有办法让自己的CSS更持久呢。
推荐插件 https://finch.io
重点 安装chrome插件
finch插件解决了这个问题，原理非常简单的，finch利用自定义的css覆盖了原有网站的样式，好比给网站穿上一套定制的衣服。不需要注册也可以正常使用
实际应用-KS实践者社区的换肤实验
以KS为例，将白色主题界面切换到黑色主题。
GIF动图
最终效果
修改版式后的效果
延展思考
如果我们将这个“本地换肤”这个概念应用到项目的实际视觉走查中，可以解决多少视觉BUG，视觉还原度，反复修改的效率问题； 设想一下：
视觉可以通过最简单修改方式改变网页样式即时得到反馈，甚至都不需要写代码，不需要经历整个开发流程，版本迭代之后在看到改版效果，迅速改善产品视觉层；
前端再也不用头疼各种样式规范、尺寸标注了，只要按照视觉的换肤属性，一次性修改样。
最重要的一点这一切都是设计过程都是及时反馈的，所见即所得
网易云免费体验馆，0成本体验20+款云产品！
更多网易研发、产品、运营经验分享请访问网易云社区。
相关文章：
【推荐】 浅析Docker容器的应用场景
【推荐】 如何实现360度的手游安全防护？网易云易盾专家分享最新实践
【推荐】 客户端SDK测试思路
网页上的内容无法选中复制该如何解决？(代码片段)
...c;会对网页做种种限制，比如让用户无法选中，那如何才能选中我们想要的内容进行复制呢？1.保存当前页面到本地；之所以保存到本地，是为了可以对文件进行代码层面的修改。2.用编辑器打开保存的HTML文件&... 查看详情
网页中的外部资源在线提供 403，但在本地工作。有没有办法解决？
...页中的外部资源在线提供403，但在本地工作。有没有办法解决？【英文标题】：Externalressourceinwebpagegives403online,butworksinlocal.Isthereawaytofix?【发布时间】：2016-01-1208:33:17【问题描述】：我正在尝试在我的网页中嵌入来自另一个网站... 查看详情
react解决antd样式没有显示问题（网页频闪问题）(代码片段)
...式，整个网页出现不停频闪效果，示例如下：解决方法忘记在App.css文件最前方加入一句：@import"~antd/dist/antd.css";很难忘的两天，故记录一下，警示下次不会再犯 查看详情
网页怎样引入本地硬盘上的js文档
...，普通浏览器难以实现在线页面上引入本地js文档。怎么解决这个问题呢？ 网页通过<script>标记可以引入在线的js文档，只有把网页保存在本地硬盘才能使用相对路径引入本地js文档，普通浏览器难以实现在线页面上引入... 查看详情
解决网盘下载速度慢的问题(代码片段)
KinhDown-百度云盘在线解析|百度网盘在线解析|百度云在线解析|百度云盘直链解析|百度网盘直链解析|百度云直链解析|百度云盘获取直链|百度网盘获取直链|百度云获取直链|百度云盘解析|百度网盘解析|百度云解析|百度云盘分享链... 查看详情
本地网页html上传到github后格式不一致
...到Github上的网站长这样小白的我，甚至不知道这样的现象如何描述，也许是CSS样式丢失？效果不一致？对照教程，并没有哪里做的不对，大家也没有遇到我这样的现象。只找到一条解决记录如下，但是我当时并没有看懂，只单纯... 查看详情
灵光一闪！帮你使用vue，搞定无法解决的“动态挂载”(代码片段)
...从实际项目出发，看看在实际解决客户问题时，如何将组件进行动态挂载，并为大家展示一个完整的解决动态挂载问题的完整过程。无法 查看详情
使用input标签解决本地图片预览的问题(代码片段)
前些日子项目中遇到了一个问题（移动端项目），就是在反馈页面点击上传图片的时候，实现在本地读取照片并预览的效果，这样的实现效果可以避开把图片上传到服务器在预览的尴尬，具体的页面展示效果如下：具体的代码如... 查看详情
2440|解决2440挂载文件系统出现“kernelpanic...“的问题(代码片段)
Kernelpanic-notsyncing:Noinitfound.Trypassinginit=optiontokernel.NET:Registeredprotocolfamily1NET:Registeredprotocolfamily17VFS:Mountedroot(cramfsfilesystem)readonly.Freeinginitmemory:116KFailedto 查看详情
网络爬虫在爬取网页时，响应头没有编码信息...如何解决保存在本地的乱码问题？
你这个问题实际就是浏览器是如何解码的！大部分网页在header都给定了编码方式的，否则浏览器也无法判断是什么编码默认使用GBK的编码，中文网站大部分都是用的这个编码方式，兼容英文追问有些网站的header是没有给定编码的... 查看详情
如何在本地网页（在我的 PC 上）上使用 Selenium WebDriver 而不是位于在线某处的网页？
】如何在本地网页（在我的PC上）上使用SeleniumWebDriver而不是位于在线某处的网页？【英文标题】：HowtouseSeleniumWebDriveronlocalwebpage(onmyPC)insteadofonelocatedsomewhereonline?【发布时间】：2013-08-0103:02:01【问题描述】：我想在我硬盘上的网... 查看详情
centos-7本地yum源挂载(代码片段)
...得非常简单。一、准备centos-7.ISO镜像文件；二、本地yum源挂载.加载镜像文件到虚拟机；开启虚拟机，查看镜像文件是否挂载成功；删除Centos7自带的yum仓库，在root用户下进行操作；配置 查看详情
linux挂载本地yum源详解(代码片段)
学习目标：挂载本地yum源在Linux下挂载下本地yum源对yum源有认识学习内容：1、认识yum源2、掌握挂载本地的yum源3、清除yum源的原有信息命令4、显示所有yum源的软件包yum挂载的的前提：已经挂载了本地光盘（我们在... 查看详情
sshfs本地挂载远程目录(代码片段)
...要内核支持，今天发现一个ssh的命令，可以将远程的目录挂载到本地，然后就可以像本地文件一样拷贝修改，很方便，记录一下安装Ubuntu系统直接使用apt安装sudoapt-getinstallsshfs本地新建一个空文件夹，作为本地的挂载点mkidrsshfstem... 查看详情
docker挂载本地目录(代码片段)
...“Permissiondenied”。可通过指定–privileged参数来解决：dockerrun-it--privileged=true-v/test:/softcentos/bin/bash [root@localhost/]#dockerrun-it-v/storage:/leader-usjava/bin/bashroot@c9c916b9a171:/#lsbinbootdevetchomeleader-usliblib64mediamntoptprocrootrunsbinsrvsystm... 查看详情
css网页编程详解(代码片段)
...ff08;CascadingStyleSheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维 查看详情
记录一个解决armlinux端u盘挂载时文件名显示乱码qt显示乱码的问题(代码片段)
摘要：解决嵌入式Linux平台下挂载盘文件名乱码、QT显示乱码问题。 1、解决嵌入式平台下挂载文件名显示乱码 我的方案开发选择采用SD卡/U盘的方式来加载3D打印模型文件，因此在PC端U盘里的文件的... 查看详情
windowssever2012磁盘脱机状态如何挂载(代码片段)
...能成功。在磁盘的前方显示一个脱机，这里记录一下如何成功的创建盘符相关文章WindowsSever2012磁盘脱机状态如何挂载WindowsServer2012通过winSW注册服务后，服务被系统强制中断的服务属性设置问题Windowsserver2012远程桌面一、... 查看详情