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 MVC初步

    今天看到了自己之前两年前写的一个地图编辑器, 写了不到一半就放弃了, 但是还是github上的小伙伴fork了, 真的感觉对不起那位伙计, 同时也鄙视一下一直以来懒得要死的自己, 希望这个demo不要 ...

  2. 【安卓手机通用】android adb shell 命令大全

    浏览:3116 | 更新:2013-10-17 17:05 | 标签:安卓 android 一.[什么是shell] Linux系统的shell作为操作系统的外壳,为用户提供使用操作系统的接口.它是命 ...

  3. JBPM4.4 基本使用

    JBPM工作流环境搭建: 1.先下载JBPM框架 2.安装JBPM图形编辑插件 注:插件在jbpm-4.4\install\src\gpd 目录下 创建工程导入JBPM依赖jar包 注:jar包目录j ...

  4. HDU 4169 UVALive 5741 Wealthy Family

    树形背包.DP递推的思路很简单.... 但是由于节点有15万个,先不论空间复杂度,这样开dp数组 dp[150000+10][300+10],如果初始化是memset(dp,-1,sizeof dp) ...

  5. N-gram语言模型简单介绍

    N-gram语言模型 考虑一个语音识别系统,假设用户说了这么一句话:"I have a gun",因为发音的相似,该语音识别系统发现如下几句话都是可能的候选:1.I have a ...

  6. 分析$.isPlainObject

    作者:zccst 本次学习$.isPlainObject,是不是一个普通对象.测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的) ...

  7. iOS给自定义个model排序

    今天有朋友问我怎么给Model排序,我顺便写了一个,伸手党直接复制吧. 例如,我建了一个Person类,要按Person的年龄属性排序: Person *per = [[Person alloc] i ...

  8. slf4j与logback对接是如何将日志写到控制台的

    今天一个以前同事问了个RT的问题 我翻了下代码,简单跟了下 很简单 1. demo代码 package org.simonme.demo.log; import org.slf4j.Logger; i ...

  9. WCF必须使用证书验证吗

    你说的 ASP.NET Web Service在消息头里加个字段,服务端做验证,这个是可以的,但是无法保证传输的用户名和密码是加密安全的. 要求使用证书,也是强制服务器端,这里涉及到服务器身份鉴别的问 ...

  10. JDBC executeBatch 抛出异常停止

    进行批量更新的时候发现: addBatch(sql); executeBatch 抛出异常后,剩余的sql没有更新,即出现异常之前的都入库了,异常之后即使有可执行sql都不会执行. 百度资料后了解:这 ...