add: 各大平台的默认字体加粗效果

This commit is contained in:
qianguyihao 2019-10-16 14:42:38 +08:00
parent aa7b7a2dc9
commit e50e10efe0
2 changed files with 47 additions and 4 deletions

View File

@ -44,7 +44,7 @@
css 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类:
- serif:衬线体。
- serif衬线体。
- sans-serif无衬线体。
- monospace等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。
- cursive手写字体。比如徐静蕾手写体。
@ -102,7 +102,7 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
font-weight: 900;
font-weight: normal; // 相当于 400
font-weight: bold; // 相当于 900
font-weight: bold; // 相当于 700
```
@ -119,6 +119,38 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
![](http://img.smyhvae.com/20191013_1100.png)
## 各大平台的默认字体加粗效果
一张图,胜过千言万语。解释了这么多,我们来看看各大平台的字体加粗效果是什么样的。以下截图,都是我亲测的结果,如果你打算让别人看效果,直接把下面的图丢给他即可。我想,像我这样贴心的前端,不多见了。
**1、Mac 平台的默认字体加粗效果**:(苹方字体)
![](http://img.smyhvae.com/20191016_1205_mac.png)
**2、Windows 平台的默认字体加粗效果**:(微软雅黑字体)
![](http://img.smyhvae.com/20191016_1205_windows2.png)
**3、iOS 平台的默认字体加粗效果**:(苹方字体)
![](http://img.smyhvae.com/20191016_1205_ios.png)
可以看出“苹方”字体的500 和600加粗效果是不同的。
**4、Android 平台(华为 P30 Pro的默认字体加粗效果**Droid Sans 字体)
![](http://img.smyhvae.com/20191016_1205_huawei_p30_pro.jpeg)
可以看出Android 平台的 Droid Sans 字体,只有 `>=700`,才会加粗。
**总结**:(各大平台的默认字体加粗效果)
- Mac & iOS 平台的“苹方”字体500 和600加粗效果是不同的`>=600`的加粗效果是相同的。
- Windows 平台的“微软雅黑”字体:只有 `>=600` 才会加粗;而且只有一种加粗效果。
- Android 平台的 Droid Sans 字体,只有 `>=700`才会加粗;而且只有一种加粗效果。
## 大部分字体不是免费的
有一点你需要知道:你所见到的大部分字体,都不是免费的。换句话说,如果你想用第三方字体从事商业活动,要先交钱,获得授权后才可以使用。你在给公司做网页的时候,就是一种商业行为。
@ -135,7 +167,7 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
这个时候,前端同学要马上告诉产品或者设计师,不要用这个字体,因为它是商用字体,是要收费的,小心吃官司。那我们该用什么字体呢?接着往下看。
### 网页一般用什么字体
## 网页一般用什么字体
大多数情况下,网页使用系统默认的字体就足够了。如果要使用特殊字体,顶多只是让**阿拉伯数字**使用特殊字体。中文和英文,使用默认字体,完全足够。
@ -187,7 +219,7 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
## 最后一段
一个再不起眼的知识点,也是有很多学问的。光是“字体”这一点,就足够成为一门学科。
一个再不起眼的知识点,也是有很多学问的,有个成语叫「见微知著」。光是“字体”这一点,就足够成为一门学科。
2005年苹果公司创始人乔布斯Steve Jobs在斯坦福大学的毕业典礼演讲上有过这样一段话

View File

@ -0,0 +1,11 @@
### 让文字只显示一行,超出显示省略号
```css
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
```