web基础学习（六）CSS3 文字阴影、文本溢出、服务器字体

1、给文字加阴影

语法： text-shadow: h-shadow v-shadow blur color;

h-shadow ：必需。水平阴影的位置。允许负值。
v-shadow ：必需。垂直阴影的位置。允许负值。
blur ：可选。模糊的距离。
color ：可选。阴影的颜色。

2、文本溢出处理

固定用法：

overflow: hidden; 溢出隐藏
text-overflow: ellipsis; 文本溢出添加省略号来替代修建文本 clip: 修建文本
white-space: nowrap; 文字不换行
文字阴影文本溢出示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">/*给文字添加多层阴影的方法,用逗号隔开*/h1 {text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.8),4px 4px 5px rgba(0, 255, 0, 0.9),6px 6px 7px yellow;}ul {width: 300px;/* background-color: yellow; */list-style: none;padding: 0;}ul li {/* height: 25px; *//* line-height: 25px; */overflow: hidden; /* 溢出隐藏 */text-overflow: ellipsis; /* 文本溢出添加省略号 */white-space: nowrap; /* 不换行 */color: #333;}ul li a {color: #333;text-decoration: none;}ul li:hover {color: orange;}ul li:hover a {color: orange;}</style>
</head>
<body>
<h1>这是一个标题标签</h1>
<ul><li><a href="" title="中国高校近期密集换帅 39所“985”仅7所非副部">中国高校近期密集换帅 39所“985”仅7所非副部</a></li><li><a href="">北大教授质疑韩春雨实验 向河北科大致公开信</a></li><li><a href="">新疆出台新规：禁止家长引诱强迫孩子参加宗教</a></li><li><a href="">成本5毛假药卖12元 三地警方查出10万粒</a></li>
</ul>
</body>
</html>

3、使用服务器端字体

语句： @font-face

使用方式示例：

 /*定义1号字体 */@font-face{font-family: 定义字体名称1;/*本地没有字体,就引用src下面的服务器字体*/local('本地文件'),/*服务器字体引用*/src: url('font/Capture_it.ttf'),url('font/Capture_it.woff'),url('font/Capture_it.svg'),url('font/Capture_it.otf');}/*定义2号字体 */@font-face{font-family: 定义字体名称2;/*本地没有字体,就引用src下面的服务器字体*/local('本地文件'),/*服务器字体引用*/src: url('font/Capture_it.ttf'),url('font/Capture_it.woff'),url('font/Capture_it.svg'),url('font/Capture_it.otf');}/*使用字体*/h1 {font-family:  定义字体名称1; /* 调用上边自定义的字体名称 */}h2 {font-family: 定义字体名称2;/* 调用上边自定义的字体名称 */}

实际使用示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link href='//cdn.webfont.youziku.com/webfonts/nomal/22447/46010/57ff2261f629db0e0ce4a8de.css' rel='stylesheet'type='text/css'/><style type="text/css">@font-face {font-family: mywebfont;src: url('font/Capture_it.ttf'),url('font/Capture_it.otf');}@font-face {font-family: mywebfont2;src: url('font/Capture_it_2.ttf');}h1 {font-family: mywebfont; /* 调用上边自定义的字体名称 */}h2 {font-family: mywebfont2;}h1.text {font-family: 'winmantun23001661c7965b57af';}</style>
</head>
<body>
<h1>HELLO WORLD!</h1>
<h2>HELLO WORLD!</h2>
<h1 class="text">叽叽叽叽叽叽叽叽叽叽</h1>
</div>
</body>
</html>

以上方式仅适用英文,如何实现中文字体呢?

以下是JS情况设置

www.youziku.com 进入这个网址注册账号生成你的 AccessKey
第一步：JS调用 (本JS支持https,只需要将src属性中的http改为https即可)

将以下代码添加到您网页的：标签之中

<script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
<script type="text/javascript">$youziku.load("body", "c2453ac6544541bd9d4cf6cd45d28a47", "jdlibianjian");/*$youziku.load("#id1,.class1,h1", "c2453ac6544541bd9d4cf6cd45d28a47", "jdlibianjian");*///第一个参数"seletor1"请设置选择器代码（如:#id1、.class1、h1等），多个选择器，请用英文逗号隔开（如:#id1,.class1,h1）。//第二个参数"xxx"请您设置要使用的字体的Accesskey。//第三个参数"fontfamily"请设置字体的英文名,在字体库中获得，该参数主要是为了标记当前所用字体，方便检查、核对。//第三个参数可支持英文内容使用不同的英文字体（其实是字体优先级）；如：$youziku.load("seletor1", "xxx", "你自定义的英文字体fontfamily,有字库fontfamily");/*．．．*/$youziku.draw();
</script>

设置白名单(必须)

在项目发布到远程时，需要将远程域名，添加在有字库白名单中。白名单是为了保障用户的字体不被盗用，设置白名单后，远程网站就可以流畅应用有字库字体了，本地测试可不设置（已默认添加到白名单了）。
多套字体的应用

同一页面上要引用多套字体，只需要将那套字体页面中的应用语句[$youziku.load("xxxxx","xxxxxxxxxxxxxxxxxx","xxxxxxxxxx");]设置在当前应用语句列表之后(．．．的位置)即可。不需要重复引用第一步中的JS文件和[$youziku.draw();]语句
PC端和手机端使用不同字体效果（同一个页面下）

<script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
<script type="text/javascript">$youziku.load("selector1", "xxx", "fontfamily").mobile("xxx","fontfamily");//第一个参数"selector1"请设置选择器代码（如:#id1、.class1、h1等），多个选择器，请用英文逗号隔开（如:#id1,.class1,h1）。//第二个参数"xxx"请您设置PC端要使用的字体的Accesskey。//第三个参数"fontfamily"请设置字体的英文名，该参数主要是为了标记当前所用字体，方便检查、核对。//第三个参数可支持英文内容使用不同的英文字体（其实是字体优先级）；如：$youziku.load("seletor1", "xxx", "你自定义的英文字体fontfamily,有字库fontfamily");//调用mobile()函数即手机端应用不同的字体，第一个参数"xxx"请您设置手机端要使用的字体的Accesskey，第二个参数"fontfamily"请设置字体的英文名，该参数主要是为了标记当前所用字体，方便检查、核对。手机端也支持英文内容使用不同的英文字体。$youziku.draw();
</script>

css方式按照官方文档进行

web基础学习（六）CSS3 文字阴影、文本溢出、服务器字体相关推荐

html字体投影效果,IE10中的CSS3文字阴影（text-shadow）属性
IE10浏览器在Windows开发者预览版中引入了支持硬件加速的CSS3文字阴影(text - shadow)属性.文字阴影是Web开发中最重要的需求功能之一.它使得以前在标准中难以实现的文字效果以更 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
C#上位机基础学习_基于SOCKET实现与PLC服务器的TCP通信（二）
C#上位机基础学习_基于SOCKET实现与PLC服务器的TCP通信(二) 测试软件: TIA PORTAL V15.1 S7-PLCSIM ADVANCED V3.0 Visual Studio 20 ...
（23）css3文字阴影text-shadow
在 CSS3 中,text-shadow可向文本应用阴影.通过属性值能够规定水平阴影.垂直阴影. 模糊距离,以及阴影的颜色. 1.文字阴影语法 text-shadow属性向文本添加阴影,属性值有2-3 ...
CSS基础学习--6 CSS Text（文本）
一.文本颜色 color:red; 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 ...
css3文字阴影和盒子阴影
首先,圆角的话我们已经在前面提到过,也写过很多次了,这里再给大家发以下代码的写法,做一个温习就过了: 那么效果如下: border-raidus 所设置的px越大,圆角效果越明显,只有当元素的宽度和高 ...
【css3文字阴影+盒子阴影+过渡+2d转换+3d转换】
文字阴影text-shadow text-shadow 后面的值有4个: 第一个:X轴,水平阴影位置允许负值. 第二个:y轴,垂直阴影位置,允许负值. 第三个:blur, 模糊的距离第 ...
【web前端开发】CSS文字和文本样式
文章目录前言字体大小字体粗细字体样式字体 font复合属性文本缩进文本水平对齐方式文本修饰线行高颜色标签水平居中 ⭐思维导图前言本篇文章主要讲解CSS中的文字和文本样式及一些 ...
PR基础学习(六) 时间轴面板
下面就单独简单介绍时间轴面板,所使用的的截图也只截时间轴面板部分. 音频轨道,视频轨道一个视频,由视频轨道(video track)和音频轨道(audio track)组成,在时间轴面板里面,编辑也 ...

web基础学习（六）CSS3 文字阴影、文本溢出、服务器字体

1、给文字加阴影

2、文本溢出处理

3、使用服务器端字体

web基础学习（六）CSS3 文字阴影、文本溢出、服务器字体相关推荐

最新文章

热门文章