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属性进行页面中的简单布局,但是也存在一些缺点, ...
随机推荐
- Javascript CustomEvent
Javascript CustomEvent 原文链接 https://davidwalsh.name/customevent,看到一篇介绍自定义事件的文章 翻译一下,不足之处,还请指正. 自浏览器诞 ...
- H5+JS+JQuery+ECharts实现异步加载
这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...
- python3.5安装pyHook,解决【TypeError: MouseSwitch() missing 8 required positional arguments: 'msg', 'x', 'y', 'data', 'time', 'hwnd', and 'window_name'】这个错误！
为什么安装 pyHook包:为Windows中的全局鼠标和键盘事件提供回调. Python应用程序为用户输入事件注册事件处理程序,例如鼠标左键,鼠标左键,键盘键等 先要实时获取系统的鼠标位置或者键盘输 ...
- 机器学习算法 - 最近邻规则分类KNN
上节介绍了机器学习的决策树算法,它属于分类算法,本节我们介绍机器学习的另外一种分类算法:最近邻规则分类KNN,书名为k-近邻算法. 它的工作原理是:将预测的目标数据分别跟样本进行比较,得到一组距离的数 ...
- Servlet与Jsp的结合使用实现信息管理系统二
PS:前面说了抽取框架的搭建,接着就要我们开始进入网址的时候就要查到全部信息并显示在首页,我们用到的MySql数据库,具体步骤是: 创建数据库,创建表,添加信息 项目中调入mysql的jar包 mys ...
- php银联网页支付实现方法
本文实例讲述了php银联网页支付实现方法.分享给大家供大家参考.具体分析如下: 这里介绍的银联WAP支付功能,仅限消费功能. 1. PHP代码如下: 复制代码代码如下: <?phpna ...
- Koltin——最详细的可见性修饰符详解
在Kotlin中,不管是类,对象,接口,构造函数,函数,属性及其设置器都具有可见性修饰符.Kotlin中的可见性修饰符共四种.即public.protected.private.internal.在不 ...
- 3、C#基础 - C# 的 Hello World
HelloWorld,是学会程序的通用起手式了,哈哈. 打开我们的VS:文件\新建\项目 选择"控制台应用(.NET Framework)",名称改为"HelloWorl ...
- NOIP2017 小凯的疑惑
题目描述 小凯手中有两种面值的金币,两种面值均为正整数且彼此互素.每种金币小凯都有 无数个.在不找零的情况下,仅凭这两种金币,有些物品他是无法准确支付的.现在小 凯想知道在无法准确支付的物品中,最贵的 ...
- ubuntu更换开机动画
ubuntu更换启动动画 作为一个个用linux作为桌面环境,并且完全替代了windows的来说,怎么折腾好看,是一个重要的问题,而Ubuntu的开机动画,那紫色的画面,ubuntu那几个大字,实在丑 ...