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          字间距
 
 
 
 
 
 
 
 
 

css文字与文本相关样式的更多相关文章

  1. CSS文字，文本常用样式

    CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...

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

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

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

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

  4. CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）

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

  5. 14 ,CSS 文字与文本

    1.CSS 中长度与颜色 2.CSS 中的文字属性 3.CSS 中的文本属性 14.1 CSS 中长度与颜色 长度单位 说明 in 英寸 cm 公分 mm 公里 cm 以目前字体高度为单位 ex 以小 ...

  6. CSS文字，文本，背景，盒模型等记录

    文字: font-family:" "; /*设置字体*/ font-size:6px;/*设置文字字号*/ color:red;/*设置文字颜色*/ font-weight:bo ...

  7. css设置网页文本选中样式

    网页的默认的文本选中颜色是蓝底白字(大多应该是吧),这个样子: 感觉并不是特别好看,可以通过CSS3的一个特性,一个CSS3的伪类选择器::selection来设置文本被选中时的状态,比如本博客的主题 ...

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

    1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  9. CSS3 文字与字体相关样式

    给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...

随机推荐

  1. SVN版本控制详解

    1 版本控制 1.1 如果没有版本控制? Team开发必备. 一个人开发(必备). 版本控制:控制(代码)版本. 论文:版本控制? 毕业论文-4-22.doc 毕业论文-5-01.doc 毕业论文-f ...

  2. hdu3037Saving Beans——卢卡斯定理

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=3037 卢卡斯定理模板——大组合数的取模 代码如下: #include<iostream> #i ...

  3. 如何使用代码美化器Uncrustify (How to use code beautifier Uncrustify)

    1.下载NodePad++, 2.选择菜单Plugins/Plugin Manager/Show Plugin Manager 3.勾选UniversalIndentGUI,点击Install 4.下 ...

  4. c# Linq Where 抛出异常 导致 程序崩溃

    Collection was modified; enumeration operation may not execute" 这次项目中遇到一个问题, 就是C#程序随机崩溃, 抛出上面的异 ...

  5. POJ3067(树状数组:统计数字出现个数)

    Japan Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24151   Accepted: 6535 Descriptio ...

  6. Oracle字符串截断

    字段.SUBSTR(string,start_position,[length]) 求子字符串,返回字符串解释:string 元字符串, start_position 开始位置(从0开始), leng ...

  7. request.getSession()方法的应用

    request.getSession(true):若存在会话则返回该会话,否则新建一个会话. request.getSession(false):若存在会话则返回该会话,否则返回NULL

  8. DataWindow.Net V2.5原始文件下载

    DW2.5 原始安装程序下载 http://download.sybase.com/eval/datawindowNET_25_eval/CD50090-55-0250-01.zip

  9. jQuery contextMenu使用

    地址:jQuery contextMenu 需要以下文件: jquery.contextMenu.css jquery.min.css jquery.contextMenu.js jquery.ui. ...

  10. [翻译]Nativescript 中 Web 视图与 Android/IOS 的双向通信

    English document From http://shripalsoni.com/blog/nativescript-webview-native-bi-directional-communi ...