zoukankan      html  css  js  c++  java
  • (转载)不错的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;
    }
    

      个人实验(效果图)

      

      总结

       这些东西不会是一成不变的,根据需求、境界改变,找到适合的就好。

  • 相关阅读:
    【UML建模】UML类图几种关系的总结
    【架构框架】IoC框架
    【AutoMapper基础】值解析器--Custom value resolvers
    【AutoMapper基础】简单示例--Flattening
    【AutoMapper简介】
    【UML建模】UML类图符号简介
    【.Net基础02】XML序列化问题
    【.net 基础01】ReferenceEquals,Equals,==的区别
    【Visual Studio】利用预编译命令发布不同的版本
    【Windows Phone 8】五角星评价控件
  • 原文地址:https://www.cnblogs.com/overfly/p/7268934.html
Copyright © 2011-2022 走看看