CSS3 文字与字体相关样式
- 给文字添加阴影
- 文字换行
- 客户端文字
- 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 文字与字体相关样式的更多相关文章
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...
- web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式
12. 文字和字体相关样式 12.1 CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...
- CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）
CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...
- [CSS3]学习笔记-文字与字体相关样式
1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- 3.css3文字与字体
1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...
- css3文字与字体样式
css3使用服务器端字体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- css文字与文本相关样式
css文字属性定义文本的字体系列,大小,加粗,风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style ...
- css3文字与字体的相关样式
给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length c ...
- css3中的布局相关样式
web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...
随机推荐
- java二进制相关基础
转载请注明原创出处,谢谢! 说在前面 之前在JVM菜鸟进阶高手之路十(基础知识开场白)的时候简单提到了二进制相关问题,最近在看RocketMQ的源码的时候,发现涉及二进制的内容蛮多,jdk源码里面也是 ...
- 2.1synchronized同步方法
由前言: 在第一章已经出现了非线程安全的情况."非线程安全"其实会发生在多个线程同时对同一个对象中的实例变量进行访问时发生.产生的结果就是脏读(读到被修改过的数据). " ...
- [行业关键词] review code review
意思是 代码评审 或是 代码回顾 代码评审是指在软件开发过程中,通过对源代码进行系统性检查的过程.通常的目的是查找系统缺陷,保证软件总体质量和提高开发者自身水平. Code Review是轻量级 ...
- PHP实现excel
导入 public function excel_put(){ //先做一个文件上传,保存文件 $path=$_FILES['file']; $filePath = "uploads/&qu ...
- Java集合（5）一 HashMap与HashSet
目录 Java集合(1)一 集合框架 Java集合(2)一 ArrayList 与 LinkList Java集合(3)一 红黑树.TreeMap与TreeSet(上) Java集合(4)一 红黑树. ...
- NavMesh--导航网格寻路
一.概述: NavMesh是3D游戏世界中用于实现动态物体自动寻路的一种技术,他将游戏场景中复杂的结构组织关系简化为带有一定信息的网格, 进而在这些网格的基础上通过一些列的计算来实现自动寻路. 二.简 ...
- day4、Linux基础题目
第一题 我想在/data/da 目录下面创建 一个 da.txt 文件 [root@ll ~]# cd /data/oldboyedu -bash: cd: /data/oldboyedu: No s ...
- Java代码操作SVN
package com.leadbank.oprPlatform.util;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import ...
- 程序员的自我救赎---3.2：SSO及应用案例
<前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...
- Express4.x API (二)：Request (译)
写在前面 最近学习express想要系统的过一遍API,www.expressjs.com是express英文官网(进入www.epxressjs.com.cn发现也是只有前几句话是中文呀~~),所以 ...