css文字与文本相关样式

css文字属性定义文本的字体系列，大小，加粗，风格和变形

 

font-family          设置字体系列

font-size          设置字体的尺寸

font-style          设置字体的风格

font-variant          以小型大写字体或正常字体显示文本

font-weight          设置字体的粗细

 

css3文字相关样式

1.给文字添加阴影

 

<!--text-shadow:length length length color-->

<!--阴影离开文字横向方向的距离

阴影离开文字纵向方向的距离

模糊程度

阴影颜色

-->

<style>

     div{

          text-shadow:5px 5px 5px red;

          /**可以添加多个阴影**/

          text-shadow:-5px -5px 10px #ff00ff,5px 5px 5px #ff00ff,10px 10px 2px #ff00ff;

          color:black;

          font-size:40px;

          fon-weight:bold;

     }

</style>

<div>hello world!</div>

 

2.使用服务器端字体

当客户端没有我们想要的字体样式时，依然可以使用服务器端字体，显示我们想要的字体效果

字体换行设置

word-break : normal , keep-all , break-all; 

(使用浏览器默认的换行规则，允许在单词内换行，只能在半角空格或连字符处换行)

 

 

<style>

     @font-face{

          font-family:webfont;

          /*ttf :truetype  otf:opentype*/

          src:url('DdjaVuSansMono-BoldOblique.ttf')format("truetype");

          font-weight:normal;

     }

     div{

          font-family:webfont;

     }

</style>

<div>使用服务器端字体</div>

客户端有某个字体时，引用情况如下

 

<style>

     @font-face{

          font-family:Arial;

          src:local("Arial"),     /*引用本地的字体*/

               url("NotoSansCJKsc-Thin.otf");

     }

</style>

<div>引用本地字体测试</div>

 

3.修改文字种类而保持字体尺寸不变

font-size-adjust : aspect值;

x-height : 58    font-size:100px   aspect : 0.58

 

<style>

     #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.60;

     }

</style>

<body>

     <div id="div1">Text sample</div>

     <div id="div2">Text sample</div>

     <div id="div3">Text sample</div>     

</body>

 

 

 

 

 

 

css文本属性可定义文本外观，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进

 

color          文本颜色

direction          文本方向

line-height          行高

letter-spacing          字符间距

text-align          对齐元素中的文本

text-decoration          向文本添加修饰

text-indent          缩进元素中文本的首行

text-transform          元素中的字母

none:     无转换

capitalize:     将每个单词的第一个字母转换成大写

uppercase:     转换成大写

lowercase:     转换成小写

css3的新增属性：

text-shadow:     向文本添加阴影

word-wrap:     规定文本的换行规则

normal:          允许内容顶开或溢出指定的容器边界

break-word:     内容将在边界内换行，如果需要，单词内部允许断行。

unicode-bidi          设置文本方向

white-space          元素中空白的处理方式

word-spacing          字间距