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. boost库之shared_ptr

    shared_ptr 编辑 目录 1简介 2作用 3历史 4概要 5用法 ▪ 删除共享对象 ▪ 标准容器 1简介编辑 shared_ptr是一种智能指针(smart pointer). 2作用编辑 s ...

  2. openstack controller ha测试环境搭建记录（二）——配置corosync和pacemaker

    corosync.conf请备份再编辑:# vi /etc/corosync/corosync.conf totem {        version: 2 token: 10000        t ...

  3. 关于在TabBar 中添加按钮,并通过block 或代理在控制器中实现响应

    相信很多朋友会遇到在TabBar中添加按钮,并要求点击按钮能够实现一些功能,但是当我们自定义的时候,怎么才能在控制器中响应?通常我会用代理或者block,block性能更好,建议使用. 自定义TabB ...

  4. [Programming WCF Services]Chapter 1. WCF Essentials - EndPoint

    1.配置文件方式设置EndPoint(ABC) 1.1.基本配置 <system.serviceModel> <services> <service name=" ...

  5. (简单) POJ 1426 Find The Multiple，BFS+同余。

    Description Given a positive integer n, write a program to find out a nonzero multiple m of n whose ...

  6. November 11th 2016 Week 46th Friday

    Keep in mind that neither success nor failure is ever final. 无论成败,皆非定局. The final is not coming, but ...

  7. Java 之 反射

    1.反射 a.意义:允许运行中的Java程序对自身进行检查,或者说"自审",并能直接操作程序的内部属性 b.概括:运行时探究和使用编译时未知的类 c.反射的核心原理: ①JVM在加 ...

  8. sql语句：创建事物

    BEGIN TRAN Tran_Money --开始事务 DECLARE @tran_error int; ; BEGIN TRY WHERE Name = '刘备'; SET @tran_error ...

  9. Motion-Based Multiple Object Tracking

    kalman filter tracking... %% Motion-Based Multiple Object Tracking % This example shows how to perfo ...

  10. ZOJ 1025 Wooden Sticks

    题目大意:有n个木棍,分别具有长度li和重量wi.对于木棍s1和s2,若l1<=l2且w1<=w2,则s1.s2可构成单调递增序列.求n个木棍中这样序列的个数. 最先的想法是,先排序,然后 ...