首先，着急的人可以直接把样式表里的代码复制走。这种日文字体的设置有较高的兼容性，有较高的覆盖率。从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;
}

注意（2023年1月29日补充）：上面的第二组，使用medium字体时，不建议全局使用。需要稍微加粗的地方单独设置。
否则，一旦medium字体在font-family中靠前设置，后面样式中如果使用font-weight:700，那么显示的粗体会很怪异，像是把medium字体通过渲染加粗了一样。跟实际的游ゴシック的粗体不一样。
换句话说，当设置font-weight:700时，浏览器将Yu Gothic Medium字体渲染成了粗体，并没有调用Yu Gothic bold字体文件。
对比如下：

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

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

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