CSS怎么让PAD不使用平方字体

html-css021

CSS怎么让PAD不使用平方字体,第1张

首先你不能控制用户的字体，比如说你使用的是“华文楷体”，而用户电脑上没有这个字体，那么会自动匹配这个电脑的默认字体将其显示出来，因此，在开发时，通常选择宋体、微软雅黑、黑体、楷体等几种最为常见的字体，而不要采用其他字体。

但是这个问题可以尽可能的规避掉

你需要为字体设置多个语言，以防止出现问题，比如：

font-family: Microsoft YaHei, SimSun, Arial

表示的就是先查找用户电脑当中是否存在微软雅黑，如果有这个字体则直接采纳，如果没有则查找宋体，如果还没有则使用arial字体。通常pad上会安装一些系统字体，你可以选择其中一种显示效果最好的，书写在font-family当中

此外，字体在设置的时候，尽量不要使用中文（如宋体使用SimSun），特别是有些人的设备当中，会存在多种同中文名但非同英文名的字体（比如微软雅黑就存在常态和加粗两种）

一般情况下，根据分辨率加载pc端 wap端 pad端三个css文件，示例：

<link rel="stylesheet" type="text/css" href="./css/style.css" media="all">

<link rel="stylesheet" href="./css/phone.css" media="(max-width:620px)">

<link rel="stylesheet" href="./css/pad.css" media="screen and (max-width:1024px) and (min-width:621px)">

只有一个css文件情况下，根据分辨率调整css样式，示例：

@media screen and  (max-width:620px){

.logo{width: 300pxmargin-left: -140px}

}

@media screen and  (max-width:1024px) and (min-width:621px) {

.logo{width: 220pxmargin-left: -99px}

.nav li:nth-of-type(2),.nav li:nth-of-type(3){width: 8%}

.nav li:nth-of-type(5),.nav li:nth-of-type(6){width: 12%}

}