css3里面的字体样式,CSS3 文字与字体相关样式

给文字添加阴影

文字换行

客户端文字

font-size-adjust属性

给文字添加阴影-text-shadow属性

text-shadow:length length length color

前三个length分别指阴影离开文字横向距离、纵向距离(这两个参数允许值为负)和模糊半径(值越大模糊范围越大，默认为0，不模糊)，color指定阴影的颜色

div {

text-shadow:5px 5px 10px gray;

}

让文本换行

很多浏览器本身自带换行功能，在css3中可以使用word-break来决定换行的处理方式

div {

word-break:keep-all;

}

值

换行规则

normal

使用浏览器的默认换行规则

keep-all

只能在半角空格或连字符处换行

break-all

允许在单词内换行

使用word-wrap属性来实现长单词与url地址的自动换行

word-wrap:break-word/normal;

//normal为默认处理

使用服务器端字体

在CSS3中，使用@font-face来利用服务器端的默认字体。

@font-face {

font-family: WebFont;

src:url('font/Fontin_Sans_R_45b.otf') format("opentype");

font-weight: normal;

}

src指定服务器端字体的字体文件所在路径

TrueType字体：.ttf

OpenType字体：.otf

Embedded OpenType字体：.eot(EOT是OpenType的一种压缩形式。这种格式是专用的(Microsoft)，仅IE提供支持。)

SVG字体：.svg(Scalable Vector Graphics或SVG是一种通用图像格式，SVG字体使用这种格式表示字符。)

Web开放字体格式：.woff(Web开放字体格式建立在TrueType基础之上，已经发展为Web字体的一个标准。大多数现代浏览器都对这种格式提供了很好的支持。)

先引用客户端上的字体，没有再引用服务器端上的字体

@font-face {

font-family: MyArial;

src:local("Arial"),

url("KaushanScript-Regular.otf");

}

font-size-adjust属性

aspect的计算方法：x-height:58 font-size:100px aspect:0.58

#div1{

font-family: Menlo;

font-size: 16px;

font-size-adjust: 0.60;

}

#div2{

font-family: cursive;

font-size: 16px;

font-size-adjust: 0.57;

}

#div3{

font-family: "Lantinghei SC";

font-size: 16px;

font-size-adjust: 0.57;

}

Text sample

Text sample

Text sample

CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

web前端学习(三)css学习笔记部分(7)-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

12.  文字和字体相关样式 12.1  CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...

CSS3系列二(媒体支持、文字与字体相关样式、盒相关样式)

CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...

[CSS3]学习笔记-文字与字体相关样式

1.给文字添加阴影

&lt ...

3.css3文字与字体

1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...

css3文字与字体样式

css3使用服务器端字体:

css文字与文本相关样式

css文字属性定义文本的字体系列,大小,加粗,风格和变形   font-family          设置字体系列 font-size          设置字体的尺寸 font-style     ...

css3文字与字体的相关样式

给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length c ...

css3中的布局相关样式

web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...

随机推荐

树形DP水题杂记

BZOJ1131: [POI2008]Sta 题意:给出一个N个点的树,找出一个点来,以这个点为根的树时,所有点的深度之和最大. 题解:记录每个点的深度,再根据根节点的深度和逐层推导出其他点的深度和. ...

IOS 图片全屏预览

如果你感觉累,那就对了那是因为你在走上坡路..这句话似乎有点道理的样子,时常提醒自己无论走到哪都不要忘记自己当初为什么出发.有时想想感觉有的东西可以记录一下,就把它记录下来吧,这次想写一下关于单张图片 ...

去掉url后面的#