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. CodeForces 621B Wet Shark and Bishops

    记录一下每个对角线上有几个,然后就可以算了 #include<cstdio> #include<cstring> #include<cmath> #include& ...

  2. Mariadb galera 群集

    环境:  CentOS 7 x64  *  3 IP : 192.168.0.100 IP : 192.168.0.101 IP : 192.168.0.102 配置mariadb YUM 源 htt ...

  3. （总结）Linux的chattr与lsattr命令详解

    PS:有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的li ...

  4. 关于安装Windows Live Writer后，内存被占满情况解决

    为了方便写博客,昨天安装了Windows Live Writer2012,但是出现了在安装好后还是正常的,第二天一开机就出现了内存被占满的情况,在资源监视器里看了下也没发现有什么问题.想还是重启一下, ...

  5. 字典NSDictionary的常见用法

    // 动态获取字典的第一个典 NSString *firstKey = responseObject.keyEnumerator.nextObject;

  6. listen函数里面backlog的意义以及各种情况

    先看了这篇: http://www.cppblog.com/thisisbin/archive/2010/02/07/107444.html 里面说了会维护两个队列,established 和 syn ...

  7. realvnc viewer 5.3.2无需输入用户名和密码访问远程桌面

    我从https://www.realvnc.com/download/viewer/下载了realvnc viewer用于访问远程的Linux桌面,这个版本不需要安装,直接运行就可以了.但在访问远程桌 ...

  8. VS2010环境下使用VB开发网络编程（WinHttp）

    首先点项目——>添加引用——>COM选项卡——>Microsoft WinHttp Services,version 5.1,然后点确定就可以添加Winhttp到项目引用中. 1.如 ...

  9. scrapy setting　备注

    scrapy 脚本里面设置输出文件: process = CrawlerProcess(settings) process.settings.set('FEED_URI', 'wangyi.csv', ...

  10. android模拟器网络设置（局域网）

    Android模拟器如何设置DNS访问局域网内网站 我们需要用到android-sdk开发包中adb shell指令 见下图