1.text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

　　

2.但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

3.@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

  1. @font-face {
  2.     font-family : 字体名称;
  3.     src : 字体文件在服务器上的相对或绝对路径;
  4. }
  1. p {
  2.     font-size :12px;
  3.     font-family : "My Font";
  4.     /*必须项，设置@font-face中font-family同样的值*/
  5. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字体</title>
  6.     <style type="text/css">
  7.         @font-face {
  8.             font-family: myfont;
  9.             src:local("Arialaaa"),/*如果本地客户端没有对应的字体，则会引用下面服务器的字体*/
  10.                 url("TACOSRG_.ttf");
  11.         }
  12.         div{
  13.             font-family: myfont;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div> this is myfont</div>
  19. </body>
  20. </html>

执行结果：

由于字体不同，即使设置相同的px大小，但是显示出来的字体还是不一样大。需要用font-size-adjust:来调整计算公式：x-height:58  font-size:100px aspect:0.58

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字体</title>
  6.     <style type="text/css">
  7.         @font-face {
  8.             font-family: myfont;
  9.             src:local("Arial11"),
  10.             url("TACOSRG_.ttf");
  11.         }
  12.        #div1{
  13.             font-family: myfont;
  14.            font-size: 16px;
  15.            font-size-adjust: 0.57;
  16.         }
  17.         #div2{
  18.             font-family:Arial;
  19.             font-size: 16px;
  20.             font-size-adjust: 0.60;
  21.         }
  22.         #div3{
  23.             font-family: cursive;
  24.             font-size: 16px;
  25.             font-size-adjust: 0.57;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div id="div1"> this is myfont</div>
  31. <div  id="div2"> this is myfont</div>
  32. <div  id="div3"> this is myfont</div>
  33. </body>
  34. </html>

4.text-shadow可以用来设置文本的阴影效果

  1. 　　　　text-shadow: X-Offset Y-Offset blur color;

　　X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；

　　Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

　　Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

　　Color：是指阴影的颜色，其可以使用rgba色。

　　　　可以设置多个阴影，用逗号隔开。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字体</title>
  6.     <style type="text/css">
  7.         h2{
  8.             width: 200px;
  9.             height: 200px;
  10.             text-shadow: 5px 5px 4px blue,
  11.                         10px 10px 3px #5cff69,
  12.                         15px 15px 2px red;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <h2>你好！中国！</h2>
  18. </body>
  19. </html>

5、font:font-style|font-weight|font-size|line-height|font-family   //写的顺序不能变

　　

CSS3---关于文本的更多相关文章

  1. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 使用CSS3改变文本选中的默认颜色——张鑫旭

    关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3. ...

  3. CSS3让文本自动换行——word-break属性

    1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法 在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...

  4. CSS3 新增文本样式

    CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 可以给文字添加阴影效果了 Shadow 影子 语法: text-sha ...

  5. css3之文本text-overflow 与 word-wrap, word-break

    CSS3 Text Overflow属性 CSS3文本溢出属性指定应向用户如何显示溢出内容 语法: text-overflow:clip | ellipsis 但是text-overflow只是用来说 ...

  6. css3基础-文本与字体+转换+过渡+动画+案例

    Css3文本与字体   文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: no ...

  7. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  8. CSS3单行文本两端对齐

    CSS3实现单行文本两端对齐 p { height: 24px; text-align: justify; text-last-align: justify; } p::after { display ...

  9. CSS3 justify 文本两端对齐

    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...

  10. 【CSS3】---文本阴影text-shadow

    text-shadow可以用来设置文本的阴影效果. 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时 ...

随机推荐

  1. keepalived+nginx高可用实现

    1.keepalived介绍 keepalived最初是专为LVS负载均衡软件设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后来又加入了实现高可用的VRRP功能.keepalived除了能 ...

  2. ngxin做http强制跳转https，接口的POST请求变成GET

    http强制跳转https出现了问题.修改nginx配置如下即可解决: server { listen 80; server_name *.snsprj.cn; return 307 https:// ...

  3. springMVC validator验证的使用

    http://blog.csdn.net/miketom155/article/details/45058195 1. 实现Validator接口,对数据进行校验 @RequestMapping(va ...

  4. SpringBoot | contrller的使用

    @Controller 处理http请求 @RestController Spring4之后新加的注解,原来返回json需要@ResponseBody配合@Controller @RequestMap ...

  5. 1-docker基础

    docker有三个基本概念:镜像/容器/仓库 镜像:一个完整的root文件系统,但并非一个iso的打包文件,而是使用分层存储.构建镜像时,是一层一层的.新的镜像,也可以在原有镜像上添加新层. 容器:是 ...

  6. The Django Book学习笔记 06 admin

    自定义字段标签 自定义一个标签, 你只需在模块中指定 verbose_name=' ' from django.db import models # Create your models here. ...

  7. canvas绘图出现模糊，解决方法

    在项目开发中发现,canvas有一个问题,绘制的图会出现模糊现象. 解决方法之一:将canvas元素放大2倍,然后将整个canvas元素或者其父元素缩小两倍. <!DOCTYPE html> ...

  8. web 前端的一些问题

    1. HTML 和 JS 一个网页显示出来的静态的内容为html创见的静态object 对这些object的操作通过JS来响应 2. HTTP cookie cookie是由server set, 由 ...

  9. RHEL 6.5----apr-util1.6执行make时报错

    报错信息 ]: Entering directory `/usr/local/src/apr-util-' /bin//build-/libtool --silent --mode=compile / ...

  10. Bootstrap中的datetimepicker浅谈

    从古至今,人们都习惯用某个时间来标记某个事件的发生.我们在写管理后台的时候,重中之中也是这个时间的设置.在问题出现的时候,我们是查看日志的时候,就可以根据这个时间段来查找这个问题出现点. 在使用时间控 ...