font-family fallback

by redky

HTML

<p class="demo">12306, byebye! 不喜欢.</p>
<p class="test">12306, byebye! <span>不喜欢.</span></p>
<p class="order">12306, byebye! 不喜欢.</p>

CSS

p {
    /* 放大, 效果更明显一些? */
    font-size: 2em;
}

/* 设计效果 */
.demo {
    font-family: arial, 'Microsoft YaHei';
}

/* .test 做对比 - 英文/数字/中文 */
.test {
    font-family: arial;
}
.test span {
    font-family: 'Microsoft YaHei';
}

/* 问题所在 */
.order {
    /* font-family 使用 fallback 机制.
      如果客户端存在第一个字体, 并且字体支持字符 就直接使用;
      否则, 就使用第二个, 以此类推. 
    */
    font-family: 'Microsoft YaHei', arial;
}