Web前端开发——CSS3之文字与文本

1. 内容

2. text-shadow属性

2.1 基本用法

 

text-shadow用法与上一节的box-shadow类似

2.1 文字描边

水平和竖直位移为0,模糊的范围值根据经验来设定,这里设为3px,不同的字号大小取值时不一样的,这样就可以达到一个描边的效果。

2.2 浮雕效果

由效果图可见它非常类似于一个查起浮雕的效果,由代码可见是把文字颜色设为白色,设置阴影颜色为黑色来衬托白色文字,这样就产生了一种浮雕效果
 

3. word-wrap属性

未设置word-wrap属性
设置了word-wrap属性

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	 p.wdrp
	 {
	   width:8em; 
	   border:1px solid #333;
	   word-wrap:break-word;
	 }
	</style>

</head>
<body>
	 <p class="wdrp">这是最长的英文单词,
pneumonoultramicroscopicsilicovolcanoconiosis.</p>

</html>

可以看到上述代码并没有对height属性进行设置,实际上测试时无论height设置为多少,只要word-wrap属性设置为break-word的话height属性都会失效

4. @font-face 规则

4.1 规则概述

@font-face 规则是规定在一种网页上可以显示的特殊字体的规则,首先我们要了解一点,就是我们无论是浏览器还是其他软件,里面呈现出来的用户可以选择的字体,其实都应该在我们的本地硬盘上,比如说在c盘的文件里,叫fonts文件夹,这个文件夹里面有很多关于字体的文件,如果你想应用对应的字体,或者显示对应的字体,这个是时候在这个文件夹里一定有一个对应的字体文件,如果没有字体的文件,我们是没有半时使用那种字体的,在这个规则没有出台之前,我们怎样在网页上显示特殊的字体呢?

第一种方式显示不可行的,客户鲜有愿意自己主动去安装,而第二种图片打开则会比较慢,所以对于css3新的标准提供了上图右边的解决问题的方式,我们可以把网页上用到的一种特殊字体放在服务器端,也就是放在你的网站名为fonts的文件夹下,然后当客户端发现网页上引用到一种特殊字体的时候,那么它不需要自己安装,而是从服务器端的fonts文件夹找到这个字体并下载到本地,这样就可以完成特殊字体在本地上的一个显示

4.2 字体文件格式

当我只有一种字体的格式时就需要根据当前字体的格式生成其他字体的格式,我们可以使用The FontSquir­rel Con­verter这个网站通过提交一种字体格式,生成其他字体格式下载到本地放在fonts文件夹即可

4.3 案例

4.3.1 文件组织

4.3.2 定义与引用规则

  • 定义字体名字:首先我们要在选择器的位置写上写上@font-face,然今在大括号内第一步就要定义这个字体的名字,不管这个字体下载下来原来是什么名字,你都可以给这个字体起一个新的名字,定义这个名字的时候使用font-family这个属性来定义名字的,后面就是字体的名字,
  • 定义字体的来源:之后再使用src属性也定义新字体的来源是什么;
  • 引用字体:最后再对应的标签内引用字体,引用字体的名字要定义字体的名字相同;

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值