2020年5月30日，AddTrust External CA Root 过期，虽然不影响客户端浏览器访问网站，但服务器端调用接口（file_get_contents）会出现问题，原因是证书链中根证书过期（必须使用检测工具检查服务端的证书链，而不是查看客户端浏览器上的证书信息，因为客户端浏览器上看到的的根证书是客户端系统上的根证书，是随着系统自动更新的）。
这里，Windows Server 的 IIS 与 CentOS 中的 nginx 又有所区别，咱们分开来讲：
如何更新 Windows Server 的 IIS 中的网站的根证书？
Windows Server 本身相当于一个客户端，会自动更新根证书，只不过 IIS 中的网站证书未同步更新。
打开 IIS，进入对应网站的“绑定”界面，重新绑定即可生效。简单的方法是简单修改主机名，确定，再改回原主机名，确定。
如何更新 CentOS 的 nginx 中的网站的根证书？
nginx 中使用的域名证书（pem 文件），即 conf 文件中设置的 ssl_certificate 路径对应的证书文件，是包含根证书信息的：
因此保留第一段域名证书信息，用新的根证书信息替换掉除第一段的其它内容即可。
在升级 kernel 后若无法启动系统，网站无法打开，SSH 无法连接，无法 ping 通。
使用 VNC 进入操作界面：
一种界面是可选择次新的内核版本：
应该能正常启动。
另一种界面提示：
Give root password for maintenance
输入密码后可启动。
阿里云工程师的建议：
1、当前默认是以最新内核启动的，由于新版内核文件存在异常无法正常运行，在手动选择低内核版本启动后，可以先更改下默认内核引导顺序，配置默认使用低版本内核运行，避免重启再次出现问题。 修改内核引导顺序 https://help.aliyun.com/knowledge_detail/41463.html 2、升级内核本身属于高危操作，建议操作前先做好快照备份，同时更新时可以参考下文档方案 避免Linux实例升级内核系统无法启动的方法 https://help.aliyun.com/knowledge_detail/59360.html
使用 JS 根据屏幕宽度来计算页面尺寸和字体大小并不是一个好办法。
rem 单位是跟随网页根元素的 font-size 改变而自动改变的，是一个相对的长度单位，非常适合在不同手机界面上自适应屏幕大小。
一般的手机浏览器的默认字体大小为 16px。即：
:root { font-size: 16px; } /* 在 HTML 网页中，:root 选择器相当于 html */也就是说，如果我定义一个宽度为 1rem，那么它的实际宽度为 16px。反过来说，如果设计稿宽度为 1000px，那么相当于 1000÷16=62.5rem。因此，我们设置一个 62.5rem 的宽度，即可正常显示 1000px 的设计效果。
为了适应不同屏幕尺寸的手机，只需按比例换算更改 :root 的 font-size 即可。这个比例是由“窗口宽度 ÷ 设计稿宽度”得到的，姑且称它为“窗设比”。
以 iPhone X 逻辑宽度 375px 为例，设计稿宽度 1000px 时，窗设比为：0.375。:root 的 font-size 将会被重置为 16 * 0.375 = 6px。上面的 62.5rem 宽度将对应 iPhone X 宽度为 62.5 * 6 = 375px，正好是屏幕逻辑宽度。
根据这个思路，理论上，我们只需要使用 CSS 将 :root 的 font-size 设置为 1px，然后使用 JS 重置为与“窗设比”相乘的积（本例中将被重置为 0.375px）。这样，我们可以不通过换算，只需要更改单位，将设计稿中的 500px 直接写入到 CSS 为 500rem，即可实现在 iPhone X 上显示逻辑宽度为（500 * 0.375 =）187.5px，即设计稿中的 1/2 宽度对应到屏幕上 1/2 的宽度。
实际上，部分安卓手机（如华为某旗舰机）不支持 :root 的 font-size 小于 12px，其它一些浏览器也会出现小于 12px 的文字以 12px 显示。
为了避免在任何环节出现小于 12px 的 font-size 值，且不增加设计稿尺寸到 CSS 数值的换算难度，我们设计了以下思路：
约定“设样比（设计稿的 px 值与 CSS 的 rem 值的比）”为 100；
使用 JS 将 :root 的 font-size 重置为“设样比”与“窗设比（窗口宽度 ÷ 设计稿宽度）”的乘积；
计算 CSS 时的 rem 值只需从设计稿中获取 px 值再除以“设样比”100 即可。
这样做的另一个好处是，不用要求设计师必须按多少尺寸来设计，当然按主流尺寸来建议是可行的。
完整代码（jQuery 版）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>Index</title>
<style>
body { margin: 0; text-align: center; }
#app { margin: 0 auto; background-color: #EEE; display: none; }
/* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
.whole { background-color: #D84C40; width: 10rem; }
.half { background-color: #3296FA; width: 5rem; }
.half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
</style>
</head>
<body>
<div id="app">
<div class="whole">100%</div>
<div class="half">50%</div>
<div class="half2">50%</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// [函数] 重置尺寸
function fn_resize() {
// 设计稿宽度（px）
var designsWidth = 1000;
// 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
var px2rem = 100;
// 限制 #app 的最大宽度为设计稿宽度
$('#app').css('max-width', designsWidth).css('min-height', $(window).height());
// 重置 :root 的 font-size
var appWidth = Math.min($(window).width(), designsWidth);
$(':root').css('font-size', px2rem * appWidth / designsWidth);
$('#app').show();
}
// 页面加载完成后重置尺寸
$(fn_resize);
// 改变窗口大小时重置尺寸
$(window).resize(fn_resize);
</script>
</body>
</html>完整代码（Vue2 版）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>Index</title>
<style>
body { margin: 0; text-align: center; }
#app { margin: 0 auto; background-color: #EEE; }
/* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
.whole { background-color: #D84C40; width: 10rem; }
.half { background-color: #3296FA; width: 5rem; }
.half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
</style>
</head>
<body>
<div id="app" v-bind:style="{ maxWidth: designsWidth + 'px', minHeight: appMinHeight + 'px' }" style="display: none;" v-show="appShow">
<div class="whole">100%</div>
<div class="half">50%</div>
<div class="half2">50%</div>
<div>appWidth: {{ appWidth }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
var app = new Vue({
el: '#app',
data: {
// 设计稿宽度（px）
designsWidth: 1000,
// 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
px2rem: 100,
// #app 的 width
appWidth: 0, // 勿改
appMinHeight: 0, // 勿改
appShow: false, // 勿改
},
mounted: function () {
// 页面加载完成后重置尺寸
this.fn_resize();
const that = this;
// 改变窗口大小时重置尺寸
window.onresize = () => {
return (() => {
console.log('RUN window.onresize()');
that.fn_resize();
})();
};
},
watch: {
// 侦听 appWidth 更改 root 的 font-size
appWidth: function () {
console.log('RUN watch: appWidth');
var root = document.getElementsByTagName("html")[0];
root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
this.appShow = true;
}
},
methods: {
fn_resize: function () {
console.log('RUN methods: fn_resize()');
this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
this.appMinHeight = document.documentElement.clientHeight;
}
}
});
</script>
</body>
</html>完整代码（Vue3 版）：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>Index</title>
<style>
body { margin: 0; text-align: center; }
#app > div { display: none; margin: 0 auto; background-color: #EEE; }
/* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
.whole { background-color: #D84C40; width: 10rem; }
.half { background-color: #3296FA; width: 5rem; }
.half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
</style>
</head>
<body>
<div id="app">
<div style="display: none;" v-bind:style="{ maxWidth: designsWidth + 'px', minHeight: appMinHeight + 'px', display: appShow ? 'block' : 'none' }">
<div class="whole">100%</div>
<div class="half">50%</div>
<div class="half2">50%</div>
<div>appWidth: {{ appWidth }}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
// 设计稿宽度（px）
designsWidth: 1000,
// 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
px2rem: 100,
// #app 的 width
appWidth: 0, // 勿改
appMinHeight: 0, // 勿改
appShow: false, // 勿改
}
},
mounted: function () {
// 页面加载完成后重置尺寸
this.fn_resize();
const that = this;
// 改变窗口大小时重置尺寸
window.onresize = () => {
return (() => {
console.log('RUN window.onresize()');
that.fn_resize();
})();
};
},
watch: {
// 侦听 appWidth 更改 root 的 font-size
appWidth: function () {
console.log('RUN watch: appWidth');
var root = document.getElementsByTagName("html")[0];
root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
this.appShow = true;
}
},
methods: {
fn_resize: function () {
console.log('RUN methods: fn_resize()');
this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
this.appMinHeight = document.documentElement.clientHeight;
}
}
});
const vm = app.mount('#app');
</script>
</body>
</html>示例中 CSS 初始 :root 的 font-size 为 16px（一个较小值，防止页面加载时瞬间出现大号文字影响用户体验），经过 fn_resize 后，:root 的 font-size 被设置为（100 * 375 / 1000 =）37.5px（iPhone X 中），那么宽度为 1000px 的设计稿中的 500px 换算到 CSS 中为 5rem，也即 37.5 * 5 = 187.5px，就是 iPhone X 的屏幕宽度的一半。
示例中 id 为 app 的 div 是用来在 PC 浏览器中限制页面内容最大宽度的（类似微信公众号发布的文章），如果网页不需要在 PC 端显示，jQuery 版代码中的 $('#app').width() 可以用 $(window).width() 来代替。
这个 div#app 一般设计有背景色，用于在宽度超过设计稿的设备上显示时区别于 body 的背景。但是当网页内容不超过一屏时，div#app 高度小于窗口，示例中与 appMinHeight 相关的代码就是为了解决这个问题。
示例中 div#app 隐藏/显示相关代码用于解决在页面加载初期由于 font-size 值变化引起的一闪而过的排版错乱。
最后补充一点，如果改变窗口大小时涉及执行耗时的操作，为避免页面卡顿，可以参考这篇文章添加函数防抖：https://xoyozo.net/Blog/Details/js-function-anti-shake
本文讲述使用网页开发适用于宴会、活动、年会现场 LED 大屏幕显示抽奖、抢楼、游戏、视频等互动界面，通过在浏览器中打开后 F11 全屏投影到大银幕上。
设计思路：
为了保证最佳的显示效果，设计稿的尺寸按大屏幕的“宽高比”来做（本文以4米*3米的大银幕为例，设计稿以800*600像素为例）。
由于电脑的视频输出分辨率很有可能与大银幕的宽高比不同，那么我们全屏投影后会界面会有变形，但是投影设备接收到电脑视频信号后再全屏显示到大银幕时，界面又会变回正常。
按设计稿的尺寸开发网页，并使用 CSS3 的 scale 实现整体伸缩，目的是自适应窗口尺寸来全屏显示内容，无留白、无裁切。整体拉伸的要求是文字、图片、背景、间距、iframe 等所有元素以统一的比例拉伸，无错位。
网页上通过 JS 设置一些快捷键来实现页面展示内容的切换。
若投影设备功能有限或操作员水平有限等原因导致无法顺利设置输入输出分辨率时，网页可设置 x 轴和 y 轴两个方向的伸缩系数、定位偏移量等，更灵活地实现完美投影需求。
开发要点：
网页尺寸按设计稿来定（以 800x600 为例）。
使用 CSS3 的 transform 的 scale 来实现缩放，以电脑显示器分辨率 1920x1080，宽放大 1920/800 倍，高放大 1080/600 倍，即可将设计稿全屏展示到电脑显示器上。为了更灵活，我们使用窗口大小来代替显示器分辨率，这样不管怎么改变窗口大小或者全屏，设计稿都能完整地显示在窗口上。
在页面初始化和窗口尺寸变化时重新调整设置上述比例。
代码参考：
如果你是刚入手的小米 WiFi 电力猫，那么按说明书一步一步配置即可。这里记录一下移机的重置方法。
本次移机的场景是电力猫从一台小米路由器更换到另一台小米路由器的配置，两台小米路由器 WIFI 的 SSD 不同（假设为 WIFI-A 和 WIFI-B）。
错误做法：打开米家，切换到 WIFI-B 所在的房间，点击右上角的添加新设备，根据介绍插上子猫，并按子猫的配置键 5 秒以上。连上“xiaomi-plc-xxx”，米家显示正在连接，但到达 100% 后显示连接超时。
可能的错误原因：
没有插上主猫
该电子猫已经在米家上添加过了（在 WIFI-A 所在的房间），就无法添加到其它房间了（仅猜测，未实测）
于是，同时插上主猫和子猫，并且路由器和主猫使用网线连接，什么都不设置，过一两分钟，两猫自动会变成蓝灯（表示连接成功）。这时，如果刚才那步没有重置成功的话，打开米家主界面上的“小米电力线wifi扩展器”（如果没有删除过，还在 A 房间），里面会显示网络名称为 WIFI-A，还可能没有开“WIFI漫游”。这样虽然能连接上网，但有两个 SSD，不能实现漫游。
这时，按子猫配置键 5 秒以上，并静等一分钟以上，变回蓝灯后，再打开米家，就会看到网络名称可能是 WIFI-B-Plus，这时"WIFI漫游”也能打开了，完美扩展了 WIFI。
综上实践得出：
WIFI 是由子猫负责的，所以跟 SSD 有关的配置由子猫负责；
一台设备（这里指电子猫套餐）只能添加到米家一次，但可以更改设备所在的房间。
正确的重置电力猫步骤是：
同时插上主猫和子猫
主猫连上路由器
子猫按配置键 5 秒以上，等待一分钟以上
打开米家，进入“小米电力线wifi扩展器”，打开 WIFI 漫游
以上仅在使用小米路由器情况下实测，非小米路由器未尝试。
Dark Mode 亦称为 暗黑模式、黑暗模式、暗色模式、黑夜模式、深夜模式、夜间模式 等，以下介绍几种常用软件的 Dark Mode 的设置方法。
iOS：
【iOS 13+】在 设置 - 显示与亮度 - 选择“深色”
【iOS 11+】在 设置 - 通用 - 辅助功能 - 显示调节 - 反转颜色 中开启“智能反转”。
“智能反转”缺点：第三方应用上显示的图片会以“经典反转”的方式展示。
Android：
设置 - 显示 - 主题模式，选择“暗色主题”
版本支持：Android 9.0 - Pie（Android P）
macOS：
系统偏好设置 - 通用 - 外观，低版本系统中勾选“使用暗色菜单栏和 Dock”，高版本系统中直接点击预览图选择主题。
版本支持：在 OS X Yosemite 10.10 中提供支持，在 macOS Mojave 10.14 中全新升级。
Windows：
桌面右键“个性化”（或从 Windows 设置中打开），在“颜色”选项卡，选择默认应用模式“暗”。
版本支持：Windows 10 October 2018 Update（版本 1809）
Microsoft Office：
文件 - 选项 - 常规 - Office 主题：黑色
在一个组件中设置后（如 Word），会在其它的组件中同时生效（如 Excel）。但 Visio 没有“黑色”主题（至少在 2019 中），我尝试更改为“深灰色”，Word 也变为“深灰色”，然后在未关闭 Visio 的情况下再次更改 Word 为“黑色”，Visio 界面竟然也变成了“黑色”，设置选项中为空白。
版本支持：Office 2016
Adobe Photoshop：
点开 菜单：编辑 - 首选项 - 界面，根据自已喜爱更改颜色方案。
版本支持：Photoshop CS6（可能更早），新版中已默认启用
CorelDRAW：
点开菜单：工具 - 选项，左侧展开 工作区 - 外观，主题选择“暗”或“黑体”。
版本支持：CorelDRAW X8（可能更早）
Microsoft Visual Studio：
点开菜单：工具 - 选项 即可更改颜色主题为“深色”（左侧选项卡为 环境-常规）。
版本支持：Visual Studio 2012
微信开发者工具：
点开菜单：设置 - 外观设置，选择“深色主题”
仅在文件代码面板有效
Microsoft Edge：
设置 - 自定义 - 选择一个模式 - 暗
Chrome：
在 Chrome 74 版本中支持。
其开发者工具（F12）早在 50 版本中已提供 Dark 主题，在开发者工具右上角展开竖状三点图标 - Settings - Theme: Dark
Windows 的 Chrome 的 Dark 模式无需设置，会根据 Windows 自身是否为暗模式来调整。
因其 Dark 模式不容易区分当前标签页，如需禁用 Dark 模式，参此文
Adobe Acrobat Reader DC：
点开菜单：视图 - 显示主题 - 深灰
HBuilder X：
点开菜单：工具 - 主题 - 酷黑
Code Write：
设置 - Editor - Theme - Dark（默认已启用）
原文标题：新手还在学习排版配色，高手已经在做内容设计了…
任何事物的呈现和传达都需要通过一定的媒介，在媒介承载的过程中，均会产生损耗。我们设计的目的之一就是将所传达的内容在媒介承载的过程中让损耗降到最低，呈现出我们想要给受众的东西，且能够被快速察觉、理解和获取（主动及被动的）。
文本作为语言沟通的书面化，一直以来承载着大量的信息，也是生活中最常见及熟知的方式。
当前人们快节奏的生活状态、快消的阅读习惯以及注意力分散，所以需要我们通过设计手段来减少视觉、心理及认知压力，让用户能够快速定位、理解和消化。同样，我们也需要根据目标、任务甚至品牌的诉求，从而更好的服务于主题。
以下是工作中一些心得和总结，旨在从更多角度去思考和完善，让文本信息能够得到更好的呈现和传达。
一、前提
前提是做事的先要条件。
达成目标
了解受众
具体情景
二、目的
目的是做这件事的动力。
满足用户所需，帮助完成工作；
简单直接，有效传达；
达成一致，统一规范可实施。
三、角度
角度是考虑要做的内容。
准确性
一致性
易读性
内容调性
1. 准确性
秉持文本信息准确明了、简达明意，无歧义
首先要明确所传达的群体对象，尽量避免使用行话，使用「用户」能直接理解的文本信息，当然相应的专业词汇也应给予良好的解释和说明。
案列：我们将 「循环次数」 更改成 「轮播次数」 ，「循环次数」会让人产生思考（循环一次是播放一次还是两次的），而 「轮播次数」 就显得更加直观明了且更符合上下文的语境。
用词完整、阐述直接
用词完整，例如保存修改，而不是简化为保存；阐述直接，避免模棱两可，模糊不清。
内容传达上应做的良好的「自解释」
例如：涉及操作事件的文本命名应根据上下文准确的进行表达，而不是含糊其辞的，使文本能够准确的解释和表达将要发生的事件及行为。
寻找更加合适的表达方式
例如：未输入提示，「XXX不能为空」 和 「请输入XXX」，第一个在表达上其实有一些责怪，而第二个表达同样说明了意思，但在口吻上却更加温和，并告诉用户应该怎样操作和行动。
避免错别字
错别字只会拉低产品的品质和用户内心的形象，请务必严格检查。避免把 「登录」 写成 「登陆」。
准确应用标点符号
标点符号能够赋予文字节奏，表达语气以及对内容的组织。准确应用，能够帮助文字更加有效传达和被人理解。
2. 一致性
同一事物用词一致，消除重复
例如，涉及新建的操作，一会用「新建」，一会又用「新增」、「创建」或者「添加」；涉及称谓，一会用「你」，一会又用「您」、「我」或者「我的」；涉及帮助，一会用「支持」，一会用「帮助」或者「服务」等等，我们应该消除这些重复，统一用词。
相似场景、意思和语境下句式表述一致
例如，未输入提示，应避免「请输入XXX」和「XXX不能为空」等不同的表达方式。
标点符号规范
根据符号使用规范并结合自身产品情况具体定义。例如：全角和半角，如常见「：」和「:」，截断省略「…」等等。又如：标题，提示文本不加结束符号等。
时间表达规范
时间是一个记录戳，需要根据与当前进行定义，显示不同的格式。
例如：今天发生的（自0时起），显示时分（24h）；今天之前发生的，显示月-日（例如02-12）；跨年，显示年-月-日（例如2017-12-30）。
数字使用规范
例如：统计数据统一使用阿拉伯数字。
大小写使用规范
专有名词大小写，单位符号等。例如：iOS
中西文混排规范
中英文之间需要加空格等。
代称一致
第一人称「我」，第二人称「你」和「您」，具体根据场景进行使用，同场景统一一致。你和您请不要随意混用或均使用，应当统一。
操作名称与目的页面标题一致
常见于移动端，在 PC 常见于链接及导航。
3. 易读性
简化内容，避免啰嗦
简单而直接，避免长段使用短语，保持措辞简洁，让读者感受到阅读乐趣，引诱他们深入阅读。
打破复杂冗长
通过段落、有序列表（项目编号）、无序列表等方式使内容结构化，便于视觉扫描。
段落：根据句意，进行分段呈现。
有序：当项目顺序或优先级重要（程序等）时，使用编号列表。
无序：项目相关时使用项目符号列表，但顺序或优先级无关紧要。
结构化：节奏和韵律。例如，电话号码或者银行卡号，使用连字符或空格使其容易被读取和识别。
重要内容突出显示
让用户首先看到最重要的内容，而不是去寻找它们。
经过良好的排版
合理使用文字大小：使用合理的字体大小，太小太大对于屏幕阅读来说都是低效率的。网页端字体大小一般使用不低于12px，更加直观易辨（对于多数人而言）的字体14px和16px；移动端字体大小不小于10pt（sp），12-18pt（sp）都是常用的字体选择范围。
颜色与对比度：颜色我们需要考虑色彩本身（色相、明度和饱和度）给人直观感受和文化寓意的，以及文本与背景之间是否有足够的对比度，从而方便人们可以更加直观舒服的进行阅读。W3C 建议的视觉呈现文本和文本的图像具有对比度至少为4.5:1，大型文字和图像的对比度至少为3:1，具体详情可了解 Contrast (Minimum):Understanding SC 1.4.3
字间距：汉字属于方块字，原则上文字外框彼此紧贴配置，称作密排；在各字之间加入固定量的空白来排列文字，称作疏排；减少字距，使得文字外框一部分重叠，称作紧排。文字排版时，会根据具体情况对字间距进行调整。大多时候我们对采用疏排方式，增加字间距，以提高易读性。
行高：具有良好的行距的文本，更易阅读和引导用户视线。与行之间的空白称为行距，文字尺寸+行距=行高，行距一般介于文字尺寸的50%–100%之间，自然行高的设置一般为文字尺寸的1.5-2倍。文字尺寸较小时，行高设定也会相对较小。行距一般不会超过文字尺寸，因为这样并不会因此而增加易读性。
段间距：段落与段落之间的距离，段间距大于行间距，行间距一般设置为文字大小的2-3倍之间，合适的段间距能够缓解用户的视线压力，起到很好的节奏及阅读定位。
行字数：一行的文字数量。一行文本过长，用户需要去移动脖子或视角，易造成的眼睛疲惫感，造成阅读困难；此外，在大段文本中找到正确的行也将变得困难。过短视线需要不断换行，从而打断了读者阅读节奏，造成尴尬的断裂效果；行太短也会造成用户在一行没读完的情况下去关注和阅读下一行。
虽然至今汉字依然没有正统的方法和具体行字数来衡量文本的完美长度，个人经验在12px下30-60汉字左右（包含标点），具体也要根据内容、人群等约束和变量，当然最重要的是要相信你自己（专业的设计师）的眼睛和判断。
词语尽量避免同行断开：例如，行末为「跳」，下行开头为「转」，读起来就有断句的存在感。
对齐方式：中文（简体）排版一般遵循左对齐的原则，符合我们从左到右的阅读习惯。文字居中，本身不适合可读性，但可用于许多小段文本块。右对齐在表格设置中，可用于数字的对比等应用。
符号避头尾：中文中行首遇到不能置于行首的标点符号，必须要将移动到前一行行尾。
合理突出：对于关键字、要点通过位置、加粗、比例大小和色彩处理等，以便让用户直接关注到。当然也要控制突出数量，毕竟都是「重点就没有重点」，过多也会扰乱和分散用户的注意力。
链接：链接文本需要很好的说明用户将要去何处，可以使用蓝色或者下划线标示出链接的样式，这是用户熟悉方式。神奇的「下划线」为体验赋能
尽量少用斜体：PC 和无线端的各个官方的中文字体包并没有斜体预设，生拉硬扯的倾斜在一定程度上是影响美观度，并造成一定的阅读困难。如果是为了突出或区别可以考虑使用字重、大小和颜色等方式。
层级处理：有对比就有层级关系，可通过大小、字重、色彩、距离、方向、纹理、形状、背景等等方式，可以让整体排版布局更加富有层次结构，让内容的可读性得到明显的提升。 例如：标题、副标题、引用和内容也是一种层级处理（结合了大小、色彩或者距离等等）。
留白：合适的留白可以更好的烘托内容主题，缓解视觉压力。
数量信息前后有汉字时需加空格：不加空格会出现前后拥挤的视感，另一方面可凸显数字信息。
4. 内容调性
依据产品定位，通过文本表述传递其相应的价值观和情感诉求
任何产品都有所针对的人群及自身的品牌形象。C端产品和 B端产品，儿童产品和成年人产品，所使用的语言表达方式自然也都是不一样的。
依据不同状态和用户群体
根据状态（正面、中性和负面）和用户（新手、中级用户和专家），使用合理的语调及用词规范，以适应不同的情境和状况。
始终坚持积极主动的，而不是消极令人沮丧
「请输入内容」与「错误，内容不能为空」，同样的意思却有不同的感受，从积极的一面表达就是传播正能量。
四、通用产出物
字体
日期和数字
标点符号
大小写
中英文混排
代称
1. 字体
字族 Font-Family
Font-Family 属性设置的字体系列。Font-Family 属性设置多个字体作为一种「后背」机制，浏览器不支持第一种字体，它会尝试下一个字体。
如果字体系列的名称超过一个字，它必须用引号，如Font-Family：「宋体」。
对于依附在 PC 端产品而言，统一的字体规范，以保证在不同平台、不同浏览器下保持良好的美观性和易读性。
以下呈现的是 Ant Design 的字体家族。个人在使用了多款后，觉得最好的一份：
font-family：「Chinese Quote」, -apple-system, BlinkMacSystemFont, 「Segoe UI」, 「PingFang SC」, 「Hiragino Sans GB」, 「Microsoft YaHei」, 「Helvetica Neue」, Helvetica, Arial, sans-serif,「Apple Color Emoji」, 「Segoe UI Emoji」, 「Segoe UI Symbol」;
如果大家想了解字体排列前后顺序的玄机可以认真看《推荐！Web中文字体应用指南》这篇文章。
以下备注区域，是我在使用字族的路上磕磕碰碰所收集到的有限知识，也算知其所以然了，若有不妥、错误和缺漏欢迎指正。
备注区域：
-apple-system：macOS 和 iOS平台的 Safari 调用 SanFrancisco 字体
BlinkMacSystemFont：macOS Chrome 调用 SanFrancisco 字体
Roboto字体，由 Google 开发，是 Android 4.0「Ice Cream Sandwich」及后面Android版本的默认字体。
Segoe UI 取代Tahoma，Windows 从 Vista 开始的界面默认西文字体。利用 ClearType 技术的新字体 Segoe UI 看起来比现在略显僵硬的 Tahoma 更加人性化。
Tahoma 被采用为 Windows 2000、Windows XP、Windows Server 2003及 Sega 游戏主机 Dreamcast 等系统的默认字型。
Arial 是一套随同多套微软应用软件所分发的无衬线体 TrueType字型。
Microsoft YaHei 微软雅黑，该字体将作为 Windows Vista 的默认字体取代2001年推出的 XP系统下默认的宋体汉字，以支持高清显示的 ClearType 功能。
Simsun 宋体，一直是简体中文版 Windows XP系统及之前版本的默认字体。但由于字体的特性，在Windows Vista 中已经改用支持 OpenType 的微软雅黑，
HanHei SC 威锋瀚黑，现苹果简体中文，OS X 10.11 El Capitan 开始，
STHeiti 华文黑体，分为「黑体-简（Heiti SC）」和「黑体-繁（Heiti TC）」，OS X 10.6 Snow Leopard 直至 OS X 10.10 Yosemite。
Hiragino Sans GB 冬青黑体
STXihei 华文细黑，是苹果公司 Mac OS X9 以及之前版本的操作系统的中文默认字体，截至 OS X 10.5 Leopard。
PingFang SC 为 iOS9.0 以后系统自带中文字体。
SanFrancisco iOS9 正式发布之后，替换了之前的 Helvetica Neue 成为了 iPhone/iPad 系列设备的默认字体。
Myriad Set Pro 苹果向 adobe 公司定制了一款西文字体，是以 myriad 为原型的，完成后在市面上叫做「myriad set」，后期升级为「myriad set pro」。
Helvetica Neue 意为「新 Helvetica」
Helvetica 是苹果电脑的默认西文字体
sans-serif 并非一个具体字体，而是css的通用字体族，具体是什么字体是由浏览器设置决定的。
字号 font-size
标题，内容，注释说明等不同字号的大小。
字间距 letter-spacing
根据不同字号，及文本数量进行字间距定义。
行高 line-height
设置行高能很好的解决，缓和上下文本之间拥挤在一起的情况。
颜色 text-color
这里主要讲下注意对比度的问题，很多产品在这一点上都忽视了这一点，搞出了所谓的「小清新」。
你可以查看完整的《网页内容可访问性指南WCAG 2.1》
《掌握具有共享样式的文本系统》（搭梯子访问）
2. 日期和数字
日期
使用完整数字日期，如：2018-01-02。
时间
使用24小时制，如 13:01:29
具体到时分秒，如当前对话显示 09:01:02
使用半角 「:」
日期和时间之间包含一个空格，如 2018-09-01 13:01:20。
数字
使用阿拉伯数字。
对四位或更多位数的数字使用逗号。
对手机号码使用前后无空格的连字符「-」。不要使用点，空格等其他符号。
数字范围使用前后无空格的连字符「-」。
正负数后不加空格。
数字和字符之间不需要空格
货币
人民币符号（¥）在数字前面，精确到小数点后两位。
测量单位
储存单位（B、kB、MB、GB、TB），在数量和度量单位之间包含一个空格。
对于长度「毫米（mm）、厘米（cm）、分米（dm）、千米（km）、米（m）、微米（μm）、纳米（nm）等」和重量「千克（kg）、克（g）、毫克（mg）、微克（ug）等」等测量单位应为小写（电流单位除外）。在数量和度量单位之间包含一个空格。
屏幕单位「像素（px）、逻辑分辨率（pt、dp、sp）、英寸（in）等 」应为小写。在数量和度量单位之间包含一个空格。
在连续列出尺寸时，将度量单位放在末尾，而不是在每个数字之后，并包括一个空格。
在所有情况下，数字和单位之间包含一个空格。HTML代码的最小空间是 & hairsp; 或 & #8202;
测量单位分为基本单位和导出单位。国际单位制共有7个基本单位长度：
长度：米 m；
质量：千克（公斤） kg；
时间：秒 s；
电流：安[培] A；
热力学温度：开[尔文] k；
物质的量：摩[尔] mol；
发光强度：坎[德拉]cd；
并由物理关系导出的单位称「导出单位」 。
3. 标点符号
省略不必要的标点
标题、副标题、输入框下的提示文本、输入框占位符、悬停提示中的文本、Toast中、弹窗等短句，在遣词造句时尽量避免标点符号，始终末尾不要使用句点。
有序列表和无序列表
使用冒号引入项目列表，列表后不使用标点。
使用列表来表示步骤、组或信息集。简要介绍列表的上下文。在顺序重要时列出数字列表，比如当您描述流程的步骤时。当列表的顺序不重要时，不要使用数字。
常用标点符号规范
空格：链接与前后文本之间增加空格；数字和单位之间包含一个空格；电话号码与前后文本包含一个空格；
省略号「…」：半角省略号，超出截断代替省略文本；
星号「*」：半角星号。表单必填、说明备注；
连接号「-」：半角连接号，前后无空格，如2018-01-04，2008-2018；
冒号「:」：半角冒号，用于时间的表示，如16:45 ；
冒号「：」：全角冒号，用于表单；
破折号「——」：中文破折号占两个汉字空间；
书名号「《》」：产品中常用于法律条文。
相关推荐：
4. 大小写
专门名词大小写
文件格式
当一般引用文件扩展名类型时，全部大写而不包含句点。
GIF
PDF
HTML
JPG 格式
引用特定文件时，文件名应该是小写的：
内容策略-设计完全手册.pdf
皮皮虾.gif
西湖.jpg
hot.html
5. 中西文混排
中英文之间需要加空格
中文与数字之间需要加空格
中文为主，使用全角符号且与英文或数字之间不加空格
6. 代称
为了表达双方的平等，避免使用「您」。使用「你」代称客户/用户，借以表达客户的口吻。在客户/用户为主的情况下使用「我」。避免同一句子中混用「你」和「我」。
对于「您」还是「你」的使用并非绝对，主要看行业以及服务的对象
在《胜于言传-Web内容创作与设计的艺术》中作者建议：
当用户提问的时候：
在问题中使用「我」和「我的」（用户的声音）
在答案中使用「你」和「你的」（应用对用户说话）
用「我们」和「我们的」代表回答公司
当应用提问的时候：
在问题中使用「你」和「你的」（应用向用户提问）
在答案中使用「我」和「我的」（用户的声音）
用「我们」和「我们的」代表回答公司
五、指导建议
操作行动
文本说明
句式结构
语音和语调
写作建议
1. 操作行动
按钮
清晰可预测。应该能够预测当点击按钮时会发生什么。
行动号召。按钮应始终带有强烈的动词，鼓励行动。为了给用户提供足够的上下文，在按钮上使用 {动词} + {名词} 格式，除了保存，关闭，取消或确定等常用操作。
以下是常用词的含义，以避免不恰当或混淆使用：
所有具体的用词需结合场景和生活习惯。
链接
使用描述性的链接文本。切勿使用「点击这里」或「这里」作为链接文本。
如果一个链接出现在句子的末尾或逗号之前，不要链接标点符号。
链接使用蓝色，这是用户习以为常的认知，并明确区分点击和未点击的区别。
2. 文本说明
对操作说明，功能说明，名词（术语）解释，提示信息等进行用户测试，是否明白其意，记住这是一个不断优化的过程。
以下是产品内的主要文本：
操作文本：按钮；
导航文本：全局和局部导航、目录、链接；
说明文本：功能说明、术语解释；
提示文本：弹框、toasts、操作反馈、系统反馈、通知等；
操作说明：功能引导说明，操作文档；
标题和副标题：弹框标题、操作说明标题、法律条款标题等；
条款：法律条款、申明；
ALT：为图片添加文字说明。
3. 句式结构
通用场景下的语句可进行归纳在一起，形成统一的句式结构。
例如：
操作反馈：成功直接提示结果，失败显示结果+说明原因+如何解决。
二次确认：先说明利害，再询问是否操作。
标题：「动词」+ 「名词」格式等。
4. 语音和语气
这听起来是谁，什么样的语音和语气能代表我们，我们想传达什么的形象。
因此，你可以建立一套准则，一般而言准则应该：
基于产品当前的业务；
准则可被执行，避免过于空洞；
易于记忆，3-5个尚可；
并随着产品发展和愿景的变化而不断适应改进。
例如：
积极主动
始终坚持积极主动的，而不是消极令人沮丧。
自信专业
避免听起来傲慢、亲密、孩子气或其他不适当的或非正式的。
友好尊重
依据不同状态（正面、中性和负面）和用户群体（新手、中级用户和专家），使用合理的语气及用词规范。
5. 写作建议
个人写作过程中的一些小感悟：
好的结果是不断修改来的，修改的基础是要先写下来，所有先记录而不是停留在脑子里，这才是一切开始的基础。
记住用户很忙且没有耐性，甚至不聪明，这会不断的促使你修改调整。
找人阅读并呈现结果，并询问其含义和建议。这是检验的最佳实践。
过段时间再来看看，或许有更好的方式。
结尾
这并非是一个完整的（内容层面可能保存图片风格，插画图标等），还有很多地方可以补充。重要的是找到适合你的产品，并有这样的意识去不断优化你的产品内容，从而更好的服务你的用户。
你可能打开了假的工具[捂嘴]
查看你打开工具的图标快捷方式是指向到哪的？
打开属性，点击“打开文件所在的位置”，是不是那个英文名的文件是高亮的？
你可以直接双击打开这个英文工具“wechatdevtools.exe”，确实打开的是上面的 NW.JS 界面，
然后打开中文名的工具“微信web开发者工具.exe”，正常运行。
那么就在这个文件上右键，选择你喜欢的打开方式吧：“固定到开始屏幕”或“固定到任务栏”或“发送到桌面快捷方式”。
附微信web开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
最近，空心图标和实心图标的讨论变得激烈起来，有言论指出空心图标在视觉上比实心图标看起来更复杂，更容易让用户差生疲劳感和倦怠感。对此，设计师们都各抒己见，一部分人表示赞同这种说法，而另一部分人则表示这样的言论将问题过分了放大化了，并且在证据方面有所欠缺。
图标也可以理解为是网站中的一种指引，是每个新用户都会涉及到的元素，所以无论空心或实心，一个能够令人一目了然，并且记忆深刻的图标才是用户真正喜欢的图标。
以下是小编搜寻的一些空心或实心的图标案例，看看你更倾心于哪一款呢？
1.模糊背景上覆盖着由简单线条、字体和单一的颜色组成的空心图标，这会让整个界面看起来很优雅。不仅如此，这种简易的设计手法也让设计师轻松不少，在效果和操作上都令大家很满意。
2.纯色的背景似乎搭配任何元素都能达到令人意想不到的效果，下面这个案例也不例外。正红色与白色之间的经典配搭，加以可爱的造型，成就了一个俏皮的实心图标设计。界面底部的实心按钮与幽灵按钮也与图标区域前后呼应。
3.APP底部的图标随着用户的任意切换，在空心和实心之间自由转变。实心的图标相比较空心的而言，给人一种更突出和明显的视觉效果，让用户更容易的抓到重点。而主内容左边的卡通小图案同时采用了空心的设置，尽显极简主义。
4.Line的界面似乎代表了大多数APP的图标设计方式。头部和底部的图标选用两种颜色的实心设计，下拉菜单部分使用空心图标。这样的设计虽然比较大众化，但不可否认的是，这样的做法的确让整个界面看起来格外整洁。
5.幽灵按钮虽然简洁大方，但是过多的使用会另界面很单调无味，但如果使用全部实心的图标设计又会觉得很突兀。下面这个案例就想出了一个好方法。既然空心实心都不合适，那不如尝试一下让两者结合在一起吧。
6.两种色差明显的颜色搭配在一起会体现出一种自然而然的时尚感，黑色背景和亮黄色的图标元素就是很典型的例子。强烈的对比色会让空心图标看起来也像实心图标一样，具有突出重点的效果。
7.Metro风格的界面设计也能运用在APP的图标模块中，案例中将各种第三方分享平台的实心图标都用方块元素连接在一起，让原本单调的图标瞬间活跃了起来，给用户一种焕然一新的感觉。
8.传统的导航图标大多会集中在一个区域内，而SevenEleven的APP在此做了很大的突破，将4个部分分别分布在界面的上下左右，简单的界面突然有了运动场的氛围，让APP充满了生命力。
9.天气类应用的看点中总会有气候图标的一席之地，正如这个案例中所表现的，这又是一个空心与实心相结合的图标设计。
10.这也是一个纯色块与实心图标搭配的案例，这个APP的界面设计其实很普通，但正因为图标的设计让网站变得可爱起来。
图标在网页设计中算是一个小单元，但它的重要性大家都有目共睹。空心图标和实心图标在不同的环境中发挥着不同的作用，美化着网页中的小细节。
| 优点 | 缺点 | |
| 大白菜 | 可还原 U 盘空间 支持 UEFI | 众多山寨产品，分不清哪个是正宗老牌，说不定还是新秀更优秀 Window 10 自带防病毒软件 Window Defender 提示发现威胁 一键制作的大白菜U盘，将 iso 拷入U盘后安装的纯净系统会被捆绑安装垃圾软件 |
| 老毛桃 | 可还原 U 盘空间 支持 UEFI PE 还不错 | “ISO 模式”没什么问题，但“一键制作”的是 FAT32 格式，不支持将大于 4GB 的 ISO 镜像拷贝到 U 盘 “模拟启动”可启动老毛桃界面，但直接写入硬盘映像的 U 盘无法模拟启动 卸载时，Window 10 自带防病毒软件 Window Defender 提示发现特洛伊木马 |
| 软碟通 UltraISO | 中规中矩 写入硬盘不会自动还原 U 盘空间 | 网上找序列号激活 |
推荐！ | 开源 可同时拷入多个系统镜像文件，并支持启动时选择 可支持格式化为多种文件格式 一键制作，可升级 | 暂无 |
软碟通制作 Windows 系统安装盘过程：
下载微软官方提供的 iso 系统镜像文件
如果 U 盘容量缩水，或根本无法正常使用 U 盘，使用老毛桃还原 U 盘空间
打开 UltraISO，打开要写入 U 盘的 iso 文件
在菜单上选择：启动 - 写入硬盘映像...
选择硬盘驱动器，格式化，写入（注意：点击“写入”是按 FAT32 重新格式化的，若要制作 NTFS 文件系统的 U 盘，请先按 NTFS 格式化，然后在此界面上点击“便捷启动”-“便捷写入”）
如果 U 盘足够大，可以在 U 盘里多放几个系统镜像，双击打开另一个 iso，将所有文件和文件夹复制到 U 盘上新建的目录中。这样下次需要安装什么系统时，只要把对应的系统的文件放到 U 盘根目录，其它系统移到二级目录中即可。当然还可以往里面存放一些常用软件。
另外最好常备一个带有 PE 系统的启动盘，在旧电脑上安装旧系统时经常会用到。
如果在分区那步无法删除或创建分区（提示动态卷什么的），在确认放弃磁盘中的文件的前提下，可以使用 Shift + F10 调出命令行，键入 diskpart，列出磁盘（list disk），选择磁盘（select disk 0），清除（clean），注意 U 盘启动盘也会在列表中，勿删！