给网站预设字体CSS最好写法

时间:20-02-10 03:39 责任编辑: admin 来源:电脑吧 点击:

  英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,只好使用系统自带的默认字体,然而我们有 Windows 和 Mac OS 两个系统,这两个系统的默认字体是不同的,那么 CSS 中的 font-family、字体大小、颜色、行距如何设置才是最美、最好看的呢?作为网页设计师,对这方面也有所研究,下面分享下这个设置方法,欢迎一起交流。

  注:这里我们只介绍「大多数」的用法,个别特殊设计需求的网站可能不适用此方法。

给网站预设字体CSS最好写法

  目录:

  字体

  字体颜色 color

  字号 font-size

  字体行距 line-height

  最佳 CSS 写法

  字体

给网站预设字体CSS最好写法

  从用户体验角度来讲,段落文本阅读体验最好的是黑体(无衬线体),而非宋体(衬线体),Win7的时候,字体默认的宋体,而从Windows 10开始,浏览器默认字体改成微软雅黑了,而 Mac OS 默认也是黑体而非宋体。

  推荐字体:

  Windows:MicroSoft YaHei(微软雅黑)

  Mac OS:PingFang SC(苹方)或 Hiragino Sans GB(冬青黑体)

  body{

  fomt-family: Hiragino Sans GB, MicroSoft YaHei;

  }

  注:个人喜欢把苹方作为文章标题字体(20PX以上),而冬青黑体作为段落字体。

  字体颜色 Color

给网站预设字体CSS最好写法

  大部网页背景颜色是使用白色,所以字体应该是使用黑色较为友好,当不建议使用纯黑(#000),这是因为纯白底与纯黑的对比太过于强烈,可以使用灰一点的黑色,比如#333,这样能减轻用户视觉负担。

  推荐字体颜色:#333

  body{

  color:#333;

  }

  字体 Font-Size

  由于现在的电脑屏都是宽屏,手机的屏幕更是高清屏,所以字体大小建议采用16PX字号会比较适合阅读。

  推荐字体szie:16px

  body{

  font-size:16px;

  }

  字体行距 Line-Height

给网站预设字体CSS最好写法

  字体行距对于阅读也有有很大的影响,比较选中太小,对于多行文字的时候,容易在阅读时「串行」,所以字体的选中个人建议是字体的1.5 – 2.0倍之间。

  推荐行距:1.75EM

  body{

  line-height:1.75;

  }

  这里后面我没有加入 em,是因为CSS默认就是 em 为单位,所以 em 可以省略不写

  最佳 CSS 写法

  body {

  /* 字体 */

  font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;

  /* 字号 */

  font-size: 16px;

  /* 字体颜色 */

  color: #333;

  /* 行距 */

  line-height: 1.75;

  }

  这里说明一下-apple-system 和 BlinkMacSystemFont 就是让 MAC OS 自动选择系统字体的意思。

    最新更新

    视觉焦点

    新闻排行

    1. Win xp开机无桌面图标怎么办?
    2. WinXP怎么样防止匿名用户登录?
    3. Winxp删除用户之后加密文件打不开怎么办?
    4. Win XP桌面快捷键变成.lnk文件如何解决?
    5. 怎么样删除IE工具栏上其他网站链接呢?
    6. Winxp系统netcfg.hlp文件丢失找不到如何解决?
    7. WinXP桌面图标存在着蓝色阴影如何修复?
    8. XP电脑文件名变成蓝色了怎么回事?
    9. winxp如何取消开机磁盘扫描?
    10. 解决activex部件不能创建对象的两个办法