(转载)不错的CSS写法
根据微信订阅号“设计达人”推送的文章,学到了如题知识。个人尝试了一下,感觉还不错。原文链接:http://mp.weixin.qq.com/s/g9TyBwB9xIi45TGwTBOLSQ。
字体

从用户体验角度来讲,段落文本阅读体验最好的是黑体(无衬线体),而非宋体(衬线体),Win7的时候,字体默认的宋体,而从Windows 10开始,浏览器默认字体改成微软雅黑了,而 Mac OS 默认也是黑体而非宋体。
推荐字体:
Windows:MicroSoft YaHei(微软雅黑)
Mac OS:PingFang SC(苹方)或 Hiragino Sans GB(冬青黑体)
body{
fomt-family: Hiragino Sans GB, MicroSoft YaHei;
}
字体颜色 Color

大部网页背景颜色是使用白色,所以字体应该是使用黑色较为友好,但不建议使用纯黑(#000),这是因为纯白底与纯黑的对比太过于强烈,可以使用灰一点的黑色,这样能减轻用户视觉负担。
推荐字体颜色:#333
字体 Font-Size
由于现在的电脑屏都是宽屏,手机的屏幕更是高清屏,所以字体大小建议采用16PX字号会比较适合阅读。
推荐字体szie:16px
字体行距 Line-Height

字体行距对于阅读也有有很大的影响,比如多行文本的时候,容易在阅读时「串行」,所以字体的行距个人建议是字体的1.5 – 2.0倍之间。
推荐行距:1.75em(CSS默认就是 em 为单位,所以 em 可以省略不写。)
最佳 CSS 写法
body {
/* 字体 */
font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
/* 字号 */
font-size: 16px;
/* 字体颜色 */
color: #333;
/* 行距 */
line-height: 1.75;
}
个人实验(效果图)

总结
这些东西不会是一成不变的,根据需求、境界改变,找到适合的就好。
(转载)不错的CSS写法的更多相关文章
- 优雅的css写法
一.利用好代码折叠 css也可以进行优雅的代码折叠而且会比html更好看 折叠后的效果: 这样就可以很舒服的把它折叠起来. 二.向Twitter Bootstrap学习 1. 学习的第一点就是用cla ...
- 转载之html特殊字符的html,js,css写法汇总
箭头类 符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ ⇠ \u21E0 \21E0 ⇢ ⇢ \u21E2 \21E ...
- table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了.里面有一个css2里的命令是我没用过的也是这里面关键的:table-layout:fixed; 原理很简单,有爱研究的童鞋可以去css官网 ...
- [转载] 高大上的 CSS 效果:Shape Blobbing
这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...
- html css:背景图片链接css写法
图片作为背景,并且是链接的写法.例如网站的logo图片.例如:土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href=" ...
- 转载:HTML/CSS 速写神器:Emmet
转载在http://bubkoo.com/2014/01/04/emmet-a-toolkit-for-improving-html-css-workflow/ 在前端开发的过程中,一个最繁琐的工作就 ...
- 【转载】了解CSS/CSS3原生变量var
文章转载自:鑫空间鑫生活(https://www.zhangxinxu.com/) 原文链接:http://www.zhangxinxu.com/wordpress/?p=5804 内容摘要: 在任何 ...
- 清除浮动最有效的css写法
说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好 ...
- html特殊字符的html,js,css写法汇总
⇠ 箭头类 符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ ⇠ \u21E0 \21E0 ⇢ ⇢ \u21E2 \ ...
随机推荐
- webpack之傻瓜式教程(转载)
1.安装好nodejs,安装过程网上找. 2.在D盘.E盘或任意一个磁盘中新建文件夹,命名为webpack_demo: 3.在webpack_demo文件下按住Shift键后点击鼠标右键,再左键点击“ ...
- 在java程序中,对于数据的输入/输出操作以“流”(stream)方式进行
在java程序中,对于数据的输入/输出操作以“流”(stream)方式进行
- bzoj 1370 Gang团伙
题目大意: 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,满足 1. 我朋友的朋友是我的朋友 2. 我敌人的敌人是我的朋友 所有是朋友的人组成一个团伙 告诉你关于这n个人的m条信息,即某两个 ...
- [Codeforces 339D] Xenia and Bit Operations
[题目链接] https://codeforces.com/problemset/problem/339/D [算法] 线段树模拟即可 时间复杂度 :O(MN) [代码] #include<bi ...
- 排名Top 100的Java类库
和去年一样,排名第一的类库,依旧是JUnit.基于它扩展的 JUnit Runner 占据第二名的位置,甚至是较旧的 junit.framework 此次也在第三名的位置.也就是说JUnit包揽了前三 ...
- bzoj2338
计算几何 我们先把所有的线段求出来,我们发现只有两个线段等长且中点重合时才能构成矩形,那么线段有n*n条,我们按中点,长度排序,然后对于一条线段扫描所有符合条件的线段计算答案,这样看起来是O(n^3) ...
- L1范数和L2范数
给定向量x=(x1,x2,...xn)L1范数:向量各个元素绝对值之和L2范数:向量各个元素的平方求和然后求平方根Lp范数:向量各个元素绝对值的p次方求和然后求1/p次方L∞范数:向量各个元素求绝对值 ...
- maven中的三种工程,以及在idea中构建父子工程。
1.pom工程:用在父级工程或聚合工程中.用来做jar包的版本控制.主要是定义POM文件,将后续各个子模块公用的jar包等统一提出来,类似一个抽象父类 2.war工程:将会打包成war,发布在服务器上 ...
- [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照(3)上传 App 预览和屏幕快照
请上传至多三个 App 预览和至多十张屏幕快照.如果您的 App 在不同设备尺寸和本地化内容间都相同,仅提供所要求的最高分辨率的屏幕快照即可. 对于 iPhone,必须提供用于 5.5 英寸设备(iP ...
- lodop 打印
使用Lodop打印: 一.在官网下载http://www.lodop.net/download.html 若是安装还是提示未安装,就按转这个 二.准备两个js 三.需要在页面最上面加入 <htm ...