1、给文字添加阴影

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         div{
             /*text-shadow: 5px 5px 5px red;*/
             /*可指定多个阴影*/
             text-shadow: 5px 5px 5px red,
             15px 15px 5px red;
             color:black;
             font-size: 40px;
             font-weight:bold;
             font-family: 宋体;
             background-image: url("1.jpg");
             height:200px;
             width:100px;
             padding:30px;
             text-align:center;
         }
     </style>
 </head>
 <body>
     <!--text-shadow:length length length color-->
     <!--阴影离开文字的横向方向距离(可为正负)、阴影离开文字的纵向方向距离（可为正负）、模糊的程度、背景颜色-->
     <div>你好！</div>
 </body>
 </html>

2、使用服务器端字体

当客户端没有想要字体的样式时，可以使用服务端的字体。

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         /*引入服务端的字体*/
         @font-face {
             font-family: WebFont;
             /*ttf:o  otf:t*/
             src:url('1.ttf')format("truetype");
             font-weight: normal;
         }
         div{
             font-family: WebFont;
         }
         /*引入客户端的字体*/
         @font-face {
             font-family: Arial;
             src:local("Arial");
         }
         div{
             font-family: Arial;
         }
     </style>
 </head>
 <body>
     <!--word-break:normal, keep-all, break-all>
     <!--使用浏览器的默认换行规则，在半角/空格/连字符处换行，允许在单词间换行-->
     <div>
         This is my Page.
     </div>
 </body>
 </html>

3、修改文字种类而保持字体尺寸不变

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         /*font-size-adjust 这个值需要计算得出
         需要x-height=59  font-size=100,则这个值应设为0.58*/
         /*不同的字体，font-size相同，但大小看起来还是不同，可以通过添加以上的属性来设置*/
         #div1{
             font-family: Menlo;
             font-size: 18px;
             font-size-adjust: 0.60;
         }
         #div2{
             font-family: cursive;
             font-size: 18px;
             font-size-adjust: 0.57;
         }
         #div3{
             font-family: Arial, Helvetica, sans-serif;
             font-size: 18px;
             font-size-adjust: 0.57;
         }

     </style>
 </head>
 <body>
     <div id="div1">test example</div>
     <div id="div2">test example</div>
     <div id="div3">test example</div>
 </body>
 </html>

[CSS3]学习笔记-文字与字体相关样式的更多相关文章

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

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

  2. [CSS3] 学习笔记-背景与边框相关样式

    1.与背景相关的新增属性 包括:backgroud-clip,backgroud-origin,backgroud-size <!DOCTYPE html> <html> &l ...

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

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

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

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

  5. CSS3 文字与字体相关样式

    给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...

  6. CSS3 学习笔记(边框 背景 字体 图片 旋转等)

    边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shad ...

  7. html5--6-16 CSS3中的文字与字体

    html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...

  8. html5--6-23 CSS3中的文字与字体

    html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...

  9. html5--6-19 CSS3中的文字与字体

    html5--6-19 CSS3中的文字与字体 学习要点 掌握文字与字体的设置 颜色值查询方法: 百度查询,很多网站有提供 下载相关手册等需要时查表 运用绘图工具中的拾色器 CSS中常用的字体属性设置 ...

随机推荐

  1. Quick Cocos2dx 与 DragonBones

    照着官方的例子试验了一下DragonBone的使用,代码如下: local AnotherScene = class("AnotherScene", function() retu ...

  2. FreeBSD 系统的配置.

    SSH 配置 vi /etc/ssh/sshd_config 修改下面的项目 RSAAuthentication yes PermitRootLogin yes PermitEmptypassword ...

  3. (简单) POJ 2492 A Bug's Life，二分染色。

    Description Background Professor Hopper is researching the sexual behavior of a rare species of bugs ...

  4. 原来在ARC下还有这么多不同?!

    1.ARC空声明变量 使用ARC的另一个优势是所有未初始化的变量默认都是"空值化"的.这意味着像下面这样的声明使用ARC编译后指向的是空值(nil): NSObject myObj ...

  5. 一、Hadoop基本操作命令

    查看hadoop版本 hadoop version 启动与关闭 启动Hadoop 1.         进入HADOOP_HOME目录. 2.         执行sh bin/start-all.s ...

  6. 《算法导论》2.3-7 检查集合中是否存在两数字和为指定的X--算法和证明

    习题2.3-7:设计一个算法,对于一个给定的包含n个整数的集合S和另一个给定的整数X,该算法可以在时间内确定S中是否存在两个元素,使得它们的和恰为X. 解题思路:首先应该想到的是先用一个的排序算法对S ...

  7. NIO 入门基础

    输入/输出:概念性描述 I/O 简介 I/O ? 或者输入/输出 ? 指的是计算机与外部世界或者一个程序与计算机的其余部分的之间的接口.它对于任何计算机系统都非常关键,因而所有 I/O 的主体实际上是 ...

  8. iOS开发——导入第三方库引起的unknown type name 'NSString'

    今天加入SVProgressHUD的第三方库的时候报了24个错误( too many errors emitted, stopping now),都是 expected identifier or ' ...

  9. ios UIKit动力 分类： ios技术 2015-07-14 12:55 196人阅读 评论(0) 收藏

    UIkit动力学是UIkit框架中模拟真实世界的一些特性. UIDynamicAnimator 主要有UIDynamicAnimator类,通过这个类中的不同行为来实现一些动态特性. 它一般有两种初始 ...

  10. Tsinsen-1486:树【Trie树 + 点分治】

    暴力部分: 这个题一开始的想法是 n^2 枚举两个点,然后logn维护LCA,在倍增的同时维护异或值和 k 的个数. s_z_l老爷指导了新的思路,既然这个树只有n^2个LCA,那么枚举LCA,同时向 ...