首先,着急的人可以直接把样式表里的代码复制走。这种日文字体的设置有较高的兼容性,有较高的覆盖率。从windows到mac再到ios再到Android…

CSS样式表中字体的设置:


/* 非衬线体(游ゴシック)通常可以做如下设置:*/
body {
    font-family: "-apple-system", BlinkMacSystemFont, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "メイリオ", "Hiragino Kaku Gothic ProN", "MS PGothic", Osaka, "sans-serif";
}


/* 但是上面的设置中,由于mac上不支持regular,所以,mac上看着会粗一些。*/
/* 下面的设置是直接将windows用的字体改成medium。这样默认文字的粗细在两个操作系统上是一样的 */
body {
    font-family: "-apple-system", BlinkMacSystemFont, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "メイリオ", "Hiragino Kaku Gothic ProN", "MS PGothic", Osaka, "sans-serif";
}


/* 衬线体(游明朝)的设置:*/
body {
    font-family: Georgia, "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho ProN", "MS P明朝", "MS PMincho", HGS明朝E, "MS Mincho", serif;
}

 
如果有兴趣可以继续往下看。
“游ゴシック”和“游明朝体”是window和mac都会支持(系统自带)的一种字体。
2016年以来,很多日本网站将这些字体作为了网站的默认字体。
本篇内容讲如何将这两个默认字体运用于网页中。

无衬线体(Sans-serif)专指西文中没有衬线的字体,与汉字字体中的黑体相对应。与衬线字体相反,该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。
中文字体中的宋体就是一种最标准的衬线体(serif)字体,衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一。不过由于强调横竖笔画的对比,在远处观看的时候横线就被弱化,导致识别性的下降。

衬线体与非衬线体的区别:

本篇文章相关标签: