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方式 按照官方文档进行