CSS font-family的順序
2016年09月07日 13時51分 wanglinqiang整理
相信大家都知道基本的用法是這樣:
font-family:font1,font2,serif;
系統有font1就先用font1
如果使用者的系統字體沒有font1,就看他有沒有font2
如果都沒有,就改用瀏覽器指定的serif字體
如此一來可以透過技巧指定中英文不同字體,例
font-family:Arial,'新細明體',sans-serif;
遇到英文的時候,會先看Arial能不能用
因為可以用所以英文會先套用Arial字體
遇到中文的時候,會先看Arial能不能用
因為Arial沒有中文字不能用,所以就再看下一個'新細明體'
由於'新細明體'字體裡面有中文可以用,所以中文就套用了'新細明體'
阿萬一都通通沒有,就以瀏覽器指定的sans-serif字體為主
如果sans-serif字體沒有中文字
就會去找系統內的fallback順序找到中文字體
如果你反過來寫就沒有這個效果,例
font-family:'新細明體',Arial,sans-serif;
中英文都可以在'新細明體'裡面找到
所以中英文全部都會用'新細明體'來顯示
萬一系統沒有'新細明體'
英文會先用Arial,中文會去找瀏覽器指定的sans-serif字體
如果sans-serif字體沒有中文字
就會去找系統內的fallback順序找到中文字體
不同的系統,想指定不同的字體,也可如法炮製
OSX有Helvetica也有Arial
Win有Arial
然後我們又知道Arial其實是Helvetica的山寨版
當然要優先使用Helvetica
font-family:Helvetica,Arila,sans-serif;
這樣英文字體就會先使用Helvetica
萬一系統沒有Helvetica,才使用Arial
如果你反過來寫...
font-family:Arial,Helvetica,sans-serif;
你也知道這樣兩套系統都有Arial
就全部都會使用Arial了阿
(當然是指使用者沒有自己刪除Arial又去安裝Helvetica的狀況)
同樣可以類推中文的狀況:
OSX有LiHeiPro(儷黑Pro,Mac上很受歡迎的預設中文字體)
若裝了office也有新細明體
Win有新細明體(似乎只有這個可以用)
誰來告訴我微軟正黑體的「碧」bug改了沒?
那這樣
font-family:'LiHeiPro','新細明體',sans-serif;
OSX上就會乖乖使用LiHeiPro
(而且不會去使用醜掉的10.6預設字體HeitiTC)
Win上就會使用新細明體
那中英文綜合的時候就是這樣
font-family:Helvetica,Arial,'LiHeiPro','新細明體',sans-serif;
如果你想要有微軟正黑體的時候,就取代新細明體,那就...
font-family:Helvetica,Arial,'LiHeiPro','微軟正黑體','新細明體',sans-serif;
以上就是CSSfont-family的遊戲方式
CSS font-family的順序的更多相关文章
- Windows 小技巧: 變更輸入法順序
Windows XP 中還是有辦法變更輸入法順序的!!只不過,要動用到 Regedit.exe 這個程式. 執行 Regedit.exe至 HKEY_CURRENT_USER\Keyboard Lay ...
- 【转载】CSS font关键字属性值的简单研究
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
- Makefile 的 prequisite 執行順序 single multi thread
Makefile 代碼如下: B 需要 A 的 產出, all: A B A B 是 target, case 1: single-thread make -j1 則執行的順序為 A -> B ...
- PEMDAS 操作順序
關於計算子 Operator 的操作順序,在"像計算機科學家一樣思考Python"這書 [1] 寫的明白扼要.它以 PEMDAS 這幾個簡單的英文字開頭表明: P (Parenth ...
- CSS Font知识整理总结
1.什么是字体 字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是 ...
- CSS font 复合属性的顺序
CSS 参考手册 实例 在一个声明中设置所有字体属性: p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20 ...
- CSS font字体知识学习
字体系列 [1]5种通用字体系列:拥有相似外观的字体系列 serif字体:字体成比例,且有上下短线(衬线字体),包括Times\Georgia\New century Schoolbook sans- ...
- css常用的简写技巧_css background简写、css border 简写、css font属性简写等
css样式中有很多简写方式,比如:设置背景,字体,边框,盒子等.我们都可以把css代码合并为一行,这篇文章将总结有哪些属性支持css简写. 1.背景background属性 background-co ...
- css font的简写规则
font的属性简写里面常用的有5个是可以写在一起的: font-style设定斜体 如:font-style: italic;font-weight设定文字粗细 如:font-weight: bold ...
随机推荐
- maven search
开放的一些maven search 1:官方 http://search.maven.org/ 2:http://maven.ozacc.com/ 3:http://mvnrepository.com ...
- Title Case
地址:http://www.codewars.com/kata/5202ef17a402dd033c000009/train/python 题目: A string is considered to ...
- Linux下设置最大文件打开数nofile及nr_open、file-max
在开发运维的时候我们常常会遇到类似“Socket/File: Can’t open so many files”,“无法打开更多进程”,或是coredump过大等问题,这些都可以设置资源限制来解决.今 ...
- hdu2002
import java.util.*;class Main{public static void main(String args[]){Scanner cin=new Scanner(System. ...
- ObjectInputStream ObjectOutStream
1:不能多次read 2:read 与write操作必须一对一
- CentOS7安装Python3.5
2. 安装Python的依赖包 yum -y groupinstall "Development tools" yum -y install openssl-devel sqlit ...
- jQuery模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
- javascript类继承系列四(组合继承)
原理: 结合了原型链和对象伪装各自优点的方式,基本思路是:使用原型链继承原型上的属性和方法,使用对象伪装继承实例属性,通过定义原型方法,允许函数复用,并运行每个实例拥有自己的属性 function B ...
- Java 对象属性的遍历
package com.cn.mybatis.test; import java.io.IOException; import java.io.InputStream; import java.lan ...
- Android简单例子——IpHone样式AlertDialog
此例子源于网络,下载下来之后,自己加了写注释,作为总结,发到博客中,谢谢原作者 通过这个例子学到的东西 1.自定义对话框的使用 2.程序中使用颜色如何进行存放,增加复用性 3.加深线性布局.常用控件的 ...