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. Django简单快速实现PUT、DELETE方法

    使用django的小伙伴们应该都知道我们是无法开心的处理PUT跟DELETE的 $.ajax({ url: 'XXX', type: 'PUT', dataType: 'json', data: { ...

  2. ABP启动流程分析

    添加服务与注册中间件 public IServiceProvider ConfigureServices(IServiceCollection services) { // Configure Abp ...

  3. CodeForces 467D（267Div2-D）Fedor and Essay （排序+dfs）

    D. Fedor and Essay time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. 【机器学习】随机森林RF

    随机森林(RF, RandomForest)包含多个决策树的分类器,并且其输出的类别是由个别树输出的类别的众数而定.通过自助法(boot-strap)重采样技术,不断生成训练样本和测试样本,由训练样本 ...

  5. web API请求与参数获取

    总结webAPI的常用请求方法与后台参数的获取: 一:get请求:(会将所以参数拼接到URL里面) 1:基础类型:string  a=“hello” , 前端无论你是写到ajax里面的data属性还是 ...

  6. 33.Docker安装Mysql及用户配置

    mysql在官方上有两个镜像 这个是一个优化过的mysql 使用这个命令 安装mysql 演示最简单的方式去安装mysql: 这种方式安装的用户名没有,密码没有 docker run -d -p 33 ...

  7. 如何解决WAMP Server 与IIS端口冲突问题

    PHP也是一门开发网页的语言,WAMP Server 是它的一个较好的集成开发环境,今日,小编发现好多Wamp Server 安装后启动local host 出现的却是IIS页面!为什么会这样呢? 出 ...

  8. OVN学习（二）

    部署OVN实验环境 同OVN学习(一) L3网络 创建逻辑交换机和路由 ### Central节点 ### 创建逻辑交换机和路由器 # ovn-nbctl ls-add inside # ovn-nb ...

  9. 洛谷P3572 [POI2014]PTA-Little Bird

    P3572 [POI2014]PTA-Little Bird 题目描述 In the Byteotian Line Forest there are nn trees in a row. On top ...

  10. 洛谷P2136 拉近距离

    题目背景 我是源点,你是终点.我们之间有负权环. --小明 题目描述 在小明和小红的生活中,有\(N\)个关键的节点.有\(M\)个事件,记为一个三元组\((S_i,T_i,W_i)\),表示从节点\ ...