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. HDU5692 Snacks

    HDU5692 Snacks Problem Description 百度科技园内有n个零食机,零食机之间通过n−1条路相互连通.每个零食机都有一个值v,表示为小度熊提供零食的价值. 由于零食被频繁的 ...

  2. 【LeetCode】064. Minimum Path Sum

    题目: Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right w ...

  3. CentOS7的网络配置

    1.DNS配置 新安装的虚拟机,ping 内网IP可以,但是ping 外网域名却失败,告知“Name or service not known”. 原来是因为需要在/etc/sysconfig/net ...

  4. hadoop编码问题，mapreduce中Tex与string的转化 乱码问题

    引用:http://blog.csdn.net/zklth/article/details/11829563 Hadoop处理GBK文本时,发现输出出现了乱码,原来HADOOP在涉及编码时都是写死的U ...

  5. windows下搭建nginx服务器及实现nginx支持https配置流程

    最近刚接触到了tomcat结合nginx做网站的负载均衡.之前对tomcat搭配nginx实现负载均衡也写过,在上一篇的博客中,最近遇到的问题是要在http的基础上支持https.也就是支持加密的请求 ...

  6. 面试题: mysql数据库 已看1 索引和事务 没用

    mysql数据库面试总结 2017年09月04日 00:11:40 阅读数:151 结合网上大神还有自己面试经历,收集的总结Mysql面试题,方便自己准备面试: mysql一个永远都复习不完,尽量总结 ...

  7. jq操作select集合

    jq操作select集合 时间:2012年12月07日分类:Javascript 最近一段时间发现,老是要跟select,option相关的东西打交道,而且有的时候还会搞错,于是,抽了一点时间整理了一 ...

  8. ACM-ICPC2018北京网络赛 Saving Tang Monk II（bfs+优先队列）

    题目1 : Saving Tang Monk II 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 <Journey to the West>(also < ...

  9. 938. Range Sum of BST

    Given the root node of a binary search tree, return the sum of values of all nodes with value betwee ...

  10. [Xcode 实际操作]七、文件与数据-(2)创建文件夹

    目录:[Swift]Xcode实际操作 本文将演示如何创建文件夹. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class ViewC ...