根据微信订阅号“设计达人”推送的文章,学到了如题知识。个人尝试了一下,感觉还不错。原文链接: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写法的更多相关文章

  1. 优雅的css写法

    一.利用好代码折叠 css也可以进行优雅的代码折叠而且会比html更好看 折叠后的效果: 这样就可以很舒服的把它折叠起来. 二.向Twitter Bootstrap学习 1. 学习的第一点就是用cla ...

  2. 转载之html特殊字符的html,js,css写法汇总

    箭头类 符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ &#8672 \u21E0 \21E0 ⇢ &#8674 \u21E2 \21E ...

  3. table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。

    找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了.里面有一个css2里的命令是我没用过的也是这里面关键的:table-layout:fixed; 原理很简单,有爱研究的童鞋可以去css官网 ...

  4. [转载] 高大上的 CSS 效果:Shape Blobbing

    这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...

  5. html css:背景图片链接css写法

    图片作为背景,并且是链接的写法.例如网站的logo图片.例如:土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href=" ...

  6. 转载:HTML/CSS 速写神器:Emmet

    转载在http://bubkoo.com/2014/01/04/emmet-a-toolkit-for-improving-html-css-workflow/ 在前端开发的过程中,一个最繁琐的工作就 ...

  7. 【转载】了解CSS/CSS3原生变量var

    文章转载自:鑫空间鑫生活(https://www.zhangxinxu.com/) 原文链接:http://www.zhangxinxu.com/wordpress/?p=5804 内容摘要: 在任何 ...

  8. 清除浮动最有效的css写法

    说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好 ...

  9. html特殊字符的html,js,css写法汇总

    ⇠  箭头类 符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ &#8672 \u21E0 \21E0 ⇢ &#8674 \u21E2 \ ...

随机推荐

  1. python 矩阵

    python的numpy库提供矩阵运算的功能,因此我们在需要矩阵运算的时候,需要导入numpy的包. 1.numpy的导入和使用 from numpy import *;#导入numpy的库函数 im ...

  2. 【Poj 1330】Nearest Common Ancestors

    http://poj.org/problem?id=1330 题目意思就是T组树求两点LCA. 这个可以离线DFS(Tarjan)-----具体参考 O(Tn) 0ms 还有其他在线O(Tnlogn) ...

  3. 详解jQuery uploadify文件上传插件的使用方法

    uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDem ...

  4. java 基础 —— 文件操作(File)

    1. 基本成员: File.separator public class File implements Serializable, Comparable<File> { private ...

  5. hdnoip2017

    T1: 小喵喵有 n 个小鱼干排成一列,其中第 i个小鱼干有两种属性,美味度 ai 和特殊度 bi 现在小喵喵要吃掉一些小鱼干,出于一些原因,小喵喵会吃掉连续的一段区间中的所有小鱼干. 如果吃掉了 [ ...

  6. 假如Java对象是个人······

    假如Java对象是个人,那意味着它也具备了我们人所有的东西,头,身体,大长腿. 头 头就是我们的对象头(Header).根据JAVA虚拟机规范,我们的对象头分为两部分,分别是存储对象自身的运行时数据和 ...

  7. lodop打印图片

    LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); //LODOP. ...

  8. 学习http协议的三次握手和四次挥手 ~~笔记

    http协议是基于tcp协议的  所以应该说是tcp协议的三次握手和四次挥手 SYN:请求建立连接,并在其序列号的字段进行序列号的初始值设定.建立连接,设置为1 FIN:用来释放一个连接.FIN=1表 ...

  9. 一个包含所有C++头文件的头函数

    #include<bits/stdc++.h> using namespace std; 使用方法和平常的头文件一样,#include<bits/stdc++.h>包含以下头文 ...

  10. Android 性能优化(5)网络优化 (1) Collecting Network Traffic Data 用Network Traffic tool :收集传输数据

    Collecting Network Traffic Data 1.This lesson teaches you to Tag Network Requests 标记网络类型 Configure a ...