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. Thrift简析

    Thrift源于大名鼎鼎的facebook之手,在2007年facebook提交Apache基金会将Thrift作为一个开源项目,对于当时的facebook来说创造thrift是为了解决faceboo ...

  2. 人工智能实践：TensorFlow 框架

    张量.计算图.会话 基本概念 基于Tensorflow的NN:用张量表示数据,用计算图搭建神经网络,用会话执行计算图,优化线上的权重(参数),得到模型. 张量(Tensor):张量就是多维数组(列表) ...

  3. php + mssql乱码

    当用PHP自带的模块php_mssql.dll去调用MSSQL数据库时,中文数据会乱码.但如果我们采用ADODB的方式去做,就不会乱码了.请看下面的具体实例: 调用开源的adodb.inc.php(支 ...

  4. [51nod1035]最长的循环节

    题意:输出<=n的数中倒数循环节长度最长的那个数 解题关键:http://w3.math.sinica.edu.tw/math_media/d253/25311.pdf https://wenk ...

  5. Struts2&nbsp;+&nbsp;easyui的DataGrid&nbsp;分页

    jsp页面 js代码: $(function() { $('#ff').hide(); $('#tt').datagrid({ title : '信息显示', iconCls : 'icon-save ...

  6. C语言学习总结

    输出加法程序 #include<stdio.h> int main() { printf("#include<stdio.h>\n\n"); printf( ...

  7. Fiddler如何抓取HTTPS协议的网页

    Fiddler默认只能抓取HTTP协议的网页,不能抓取HTTPS协议的网页,而我们很多时候,都需要抓HTTPS协议的网页,比如抓淘宝数据等.今天,韦玮老师会为大家讲解如何使用Fiddler抓取HTTP ...

  8. Find First and Last Position of Element in Sorted Array

    问题:给定一个有序数组和一个目标值,输出目标值在数组中的起始位置和终止位置,如果目标值不在数组中,则输出[-1,-1] 示例: 输入:nums = [1,2,3,5,5,7] target = 5 输 ...

  9. [Lintcode]Word Squares(DFS|字符串)

    题意 略 分析 0.如果直接暴力1000^5会TLE,因此考虑剪枝 1.如果当前需要插入第i个单词,其剪枝如下 1.1 其前缀(0~i-1)已经知道,必定在前缀对应的集合中找 – 第一个词填了ball ...

  10. TensorFlow中tf.ConfigProto()配置Sesion运算方式

    博主个人网站:https://chenzhen.online tf.configProto用于在创建Session的时候配置Session的运算方式,即使用GPU运算或CPU运算: 1. tf.Con ...