优化阅读体验,网站预设字体的CSS最佳写法
@import 'https://fonts.googleapis.com/css?family=Lato:900,700,400';
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
font-family: "Lato", sans-serif;
font-size: 28px;
font-weight: 900;
line-height: 1.20;
opacity: 1.00;
margin-top: 0px;
margin-bottom: 10px;
letter-spacing: -0.72px;
word-spacing: 0.00px;
text-transform: none;
}
h2 {
font-family: "Lato", sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.20;
opacity: 1.00;
margin-top: 30px;
margin-bottom: 5px;
letter-spacing: -0.72px;
word-spacing: 0.00px;
text-transform: none;
}
h3 {
font-family: "Lato", sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.20;
opacity: 1.00;
margin-top: 30px;
margin-bottom: 5px;
letter-spacing: 0.00px;
word-spacing: 0.00px;
text-transform: none;
}
p {
font-family: "proxima-nova-thin", sans serif;
font-size: 18px;
font-weight: 400;
line-height: 1.60;
opacity: 0.70;
margin-top: 0px;
margin-bottom: 25px;
letter-spacing: -0.30px;
word-spacing: -0.10px;
text-transform: none;
}
Here's the story about Type Anything
We created Type Anything in the need of a simple tool to create great font combinations. To put focus on typography. Type Anything lets you customize the most necessary font settings for your next project. From font families and letter spacing to font weights. Our goal was to create a great user experience, whilst working on the perfect match.
The secrets behind the curtain
Stuff you might not notice at first glance is the keyboard shortcuts. Thus we have created some shortcuts for you, e.g. '⌘ + K' will open up the search bar. Easily search and glance through all the font-families and preview before selecting one. '⌘ + J' will bring up the code for you, ready to copy into your project. Make sure you try it out with your own content, simple just paste it in here.
Help us make Type Anything better
We would love your opinion. That is why we featured Type Anything on ProductHunt (And hit #1 in Tech! Yiippy). We wanted to share this great tool with everybody. We got really good feedback, and some of the stuff is already fixed and/or added to Type Anything.
We hope you enjoy Type Anything as much as we do.
All the best,
Simon & Thomas
字体
从用户体验角度来讲,段落文本阅读体验最好的是黑体(无衬线体),而非宋体(衬线体),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
大部网页背景颜色是使用白色,所以字体应该是使用黑色较为友好,当不建议使用纯黑(#000),这是因为纯白底与纯黑的对比太过于强烈,可以使用灰一点的黑色,比如#333,这样能减轻用户视觉负担。
推荐字体颜色:#333
body{
color:#333;
}
字体 font-size
由于现在的电脑屏都是宽屏,手机的屏幕更是高清屏,所以字体大小建议采用16PX字号会比较适合阅读。
推荐字体szie:16px
body{
font-size:16px;
}
字体行距 line-height
字体行距对于阅读也有有很大的影响,比较选中太小,对于多行文字的时候,容易在阅读时「串行」,所以字体的选中个人建议是字体的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 自动选择系统字体的意思。