web 字体

字体文件比较大，除非美观的优先级极高，一般利用用户系统自带字体即可。

Segoe UI : windows Vista+默认的西文字体
Helvetica: macOS/iOS 常用的无衬线字体
Arial: 老版本windows也支持
Roboto : 安卓系统的无衬字体。
sans-serif ： 无衬字体族的兜底。

无需做浏览器UA检测，也能够用css语句做到平台自适应。
以简书的字体设置为例：

font-family: 
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";

-apple-system和BlinkMacSystemFont就能够在MacOS上自动使用系统推荐的字体（系统能够根据字体大小，切换最佳显示字体）。

不过这种写法已经过时，目前更推荐用 system-ui .

现在，越来越多网页使用Emoji，🏆 😉, 对于这种表情字体，可以参考以下设置

@font-face{ 
    font-family: Emoji;
    src:
        /* macOs/iOS */ 
        local("Apple Color Emojiji") , 
        /* win8.1+ */  
        Local("Segoe UI Emoji") , 
        /* win7/8 */  
        local("Segoe UI Symbol") , 
        /* 安卓 */ 
        local("Noto Color Emoji"); 
    unicode-range: U+1F000-1F644, U+203C-3299;
}

unicode-range能够限制emoji字体的使用范围。

推荐的字体设置方案如下：

body{
   font-family:
        system-ui, 
        -apple-system, 
        Segoe UI, 
        Roboto, 
        Emoji, 
        Helvetica, 
        Arial, 
        sans-serif； 
   }

// 衬线字体
.font-serif{ 
   font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

// 等宽字体
.font-mono{ 
   font-family: Menlo, Monaco, Consolas,"Liberation Mono","Courier New", monospace;
}