• 给文字添加阴影
  • 文字换行
  • 客户端文字
  • font-size-adjust属性

给文字添加阴影-text-shadow属性

text-shadow:length length length color

前三个length分别指阴影离开文字横向距离、纵向距离（这两个参数允许值为负）和模糊半径（值越大模糊范围越大，默认为0，不模糊），color指定阴影的颜色

div {

            text-shadow:5px 5px 10px gray;

        }

让文本换行

很多浏览器本身自带换行功能，在css3中可以使用word-break来决定换行的处理方式

div {

            word-break:keep-all;

        }
值 换行规则
normal 使用浏览器的默认换行规则
keep-all 只能在半角空格或连字符处换行
break-all 允许在单词内换行

使用word-wrap属性来实现长单词与url地址的自动换行

word-wrap:break-word/normal;

//normal为默认处理

使用服务器端字体

在CSS3中，使用@font-face来利用服务器端的默认字体。

@font-face {

            font-family: WebFont;

            src:url('font/Fontin_Sans_R_45b.otf') format("opentype");

            font-weight: normal;

        }

src指定服务器端字体的字体文件所在路径

  • TrueType字体：.ttf
  • OpenType字体：.otf
  • Embedded OpenType字体：.eot(EOT是OpenType的一种压缩形式。这种格式是专用的（Microsoft），仅IE提供支持。)
  • SVG字体：.svg（Scalable Vector Graphics或SVG是一种通用图像格式，SVG字体使用这种格式表示字符。）
  • Web开放字体格式：.woff（Web开放字体格式建立在TrueType基础之上，已经发展为Web字体的一个标准。大多数现代浏览器都对这种格式提供了很好的支持。）

先引用客户端上的字体，没有再引用服务器端上的字体

@font-face {

            font-family: MyArial;

            src:local("Arial"),

                url("KaushanScript-Regular.otf");

        }

font-size-adjust属性

aspect的计算方法：x-height:58 font-size:100px aspect:0.58

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <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.57;

        }

    </style>

</head>

<body>

    <div id="div1">Text sample</div>

    <div id="div2">Text sample</div>

    <div id="div3">Text sample</div>

</body>

</html>

CSS3 文字与字体相关样式的更多相关文章

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

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

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

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

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

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

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

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

  5. 3.css3文字与字体

    1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...

  6. css3文字与字体样式

    css3使用服务器端字体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. css文字与文本相关样式

    css文字属性定义文本的字体系列,大小,加粗,风格和变形   font-family          设置字体系列 font-size          设置字体的尺寸 font-style     ...

  8. css3文字与字体的相关样式

    给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length c ...

  9. css3中的布局相关样式

    web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...

随机推荐

  1. Less的嵌套规则

    Less的嵌套规则 在使用标准CSS时,要为多层嵌套的元素定义样式,要么使用后代选择器从外到内的嵌套定义,要么给这个元素加上类名或 id 来定义.这样的写法虽然很好理解,但维护起来很不方便,因为无法清 ...

  2. IPv6 VS IPv4，谈谈升级 IPv6 的必要性

    11月26日,中办.国办印发了<推进互联网协议第六版(IPv6)规模部署行动计划>,提出国内要在 5~10 年的时间形成下一代互联网自主技术体系和产业生态,建成全球最大规模的 IPv6 商 ...

  3. C#使用Xamarin开发可移植移动应用终章(11.获取设备信息与常用组件,开源一个可开发模版.)

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 本系列,终 ...

  4. PHP扩展代码结构详解

    PHP扩展代码结构详解: 这个是继:使用ext_skel和phpize构建php5扩展  内容 (拆分出来) Zend_API:深入_PHP_内核:http://cn2.php.net/manual/ ...

  5. 直播一：H.264编码基础知识详解

    一.编码基础概念 1.为什么要进行视频编码? 视频是由一帧帧图像组成,就如常见的gif图片,如果打开一张gif图片,可以发现里面是由很多张图片组成.一般视频为了不让观众感觉到卡顿,一秒钟至少需要16帧 ...

  6. Coursera课程 Programming Languages, Part A 总结

    Coursera CSE341: Programming Languages 感谢华盛顿大学 Dan Grossman 老师 以及 Coursera . 碎言碎语 这只是 Programming La ...

  7. Sun 与 Oracle 合并的未来

    引言 SUN 2008 初 10 亿美元收购 MySQL Oracle 2009 年 4 月 74 亿美元收购 SUN Sun 与 Oracle 合并的未来 1,如果云计算对企业来说变得越来越重要,那 ...

  8. 响应式框架Bootstrap栅格系统

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

  9. opensslBIO系列之2---BIO结构和BIO相关文件介绍

    BIO结构和BIO相关文件介绍     (作者:DragonKing Mail:wzhah@263.net 公布于:http://gdwzh.126.com openssl专业论坛)          ...

  10. duilib 快捷键发送消息

    全局快捷键设置类,文章最以下,有3种不同的使用方法(假设设置的快捷键,与其它软件的快捷键同样.那么仅仅有你的程序起作用.你释放后它才干够使用) .h文件 #pragma once class CHot ...