Web开发基础-CSS-14_web开发 css-CSDN博客

本文链接：https://blog.csdn.net/Coder_Boy_/article/details/80791023

文件编码格式对font-family的影响的说明：

大家有没有发现，在上一篇中页面效果中

font-family:

"微软雅黑","文泉驿正黑","黑体";没有起作用，

正常字体应该如下面的样式

而上节页面字体效果图如下

上面的font-family字体设置没有起作用，还是浏览器默认的字体，为什么呢？

其实是你的文件编码不同导致的。

为了说明这个问题，我们设置css样式文件分别为GBK与UTF-8演示一下：

HTML页面admin.html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>管理员列表</title>
		<link rel="stylesheet" href="list.css">
	</head>
	<body>
		<!-- logo区 -->
		<div class="logo">
			<a href="">[退出]</a>
		</div>
		<!-- 导航区 -->
		<div class="nav">nav</div>
		<!-- 核心区 -->
		<div class="main">
			<!-- 1.渐变条，已经预留了空间 -->
			<!-- 2.内容区 -->
			<div class="content">
				<!-- 按钮区 -->
				<div class="btn"></div>
				<!-- 数据区 -->
				<div class="data">
					<table>
						<thead>
							<tr>
								<td><input type="checkbox">全选</td>
								<td>管理员ID</td>
								<td>姓名</td>
								<td>拥有角色</td>
								<td></td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><input type="checkbox"></td>
								<td>1</td>
								<td>唐僧</td>
								<td>和尚、师傅、术士</td>
								<td>
									<input type="button" value="修改" class="modify">
									<input type="button" value="删除" class="delete">
								</td>
							</tr>
							<tr>
								<td><input type="checkbox"></td>
								<td>2</td>
								<td>孙悟空</td>
								<td>猴王、弟子、德鲁伊</td>
								<td>
									<input type="button" value="修改" class="modify">
									<input type="button" value="删除" class="delete">
								</td>
							</tr>
							<tr>
								<td><input type="checkbox"></td>
								<td>3</td>
								<td>猪八戒</td>
								<td>元帅、弟子、MT</td>
								<td>
									<input type="button" value="修改" class="modify">
									<input type="button" value="删除" class="delete">
								</td>
							</tr>
							<tr>
								<td><input type="checkbox"></td>
								<td>4</td>
								<td>沙僧</td>
								<td>大将、弟子、小弟</td>
								<td>
									<input type="button" value="修改" class="modify">
									<input type="button" value="删除" class="delete">
								</td>
							</tr>
						</tbody>
						
					</table>
				</div>
				<!-- 分页区 -->
				<div class="page"></div>
			</div>
		</div>
		<!-- 版权区 -->
		<div class="copy">
			<p>版权所有，违者必究。</p>
			<p>官网:www.tmooc.cn</p>
		</div>
	</body>
</html>

当list.css文件编码格式为GBK时：