您的位置：首页 > Web前端 > CSS

CSS3-字体样式

2016-05-12 14:02 323 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3的其他属性</title>
<style type="text/css">
/*@font-face ：声明使用服务器端字体*/
/*服务器端字体：用户客户端（浏览器）无需安装网页中所需要的字体，直接让浏览器去服务器端取字体，然后渲染页面的技术。省去了下载安装的操作，提升用户体验*/
/*服务器端字体对otf和ttf这两种字体格式支持良好*/
@font-face {
/*给字体去一个名字*/
font-family: "自定义";
/*把字体路径导入本文档*/
src:url("瘦金体字体.ttf");
}
p {
font-family: "自定义";
font-size: 30px;
}
/*box-sizing：设置width和height属性值包含的内容。*/
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #000;
/*默认盒模型 content-box。width和height只是用来设置元素的有效时间利用空间，添加padding和border并不会挤占元素的有效利用空间*/
/*怪异盒模型：border-box。IE浏览器下的一种盒模型，我们可以把值设置为border-box来实现怪异盒模型。width和height设置的是整个元素的尺寸（包含边框，内边距，有效利用空间），添加border和padding后，会向内挤占元素的content面积。*/
/*padding-box。PC端浏览器不支持该设置，但是在手机端支持。width和height设置元素的尺寸（包含内边距，有效利用空间），添加padding后，会向内挤占元素的content面积。边框依旧会向外扩展*/
box-sizing: border-box;
}
div p {

}

</style>
</head>
<body>

<p> 你猜我是什么字体 hello world</p>
<div>
<p>我是文字</p>
</div>

<!-- resize：textarea 标签的该属性值是both，可以修改为none让其无法缩放 -->
<!-- 我们可以给其他标签设置resize属性，让用户来手动缩放这些标签，看是为了让缩放生效，需要把标签的overflow属性设置为auto或hidden（慎用！！！！！） -->

<div style="width: 100px; height: 100px; resize: both; overflow: auto; border: 1px solid red"></div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 字体

相关文章推荐

新的分享

章节导航