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

最新推荐文章于 2023-08-28 08:08:42 发布

June.1

最新推荐文章于 2023-08-28 08:08:42 发布

阅读量1.2w

点赞数 2

分类专栏： web基础 web前端文章标签： css3文字阴影 css3文本溢出在线字体

本文链接：https://blog.csdn.net/qq_39043923/article/details/88945691

版权

web前端同时被 2 个专栏收录

17 篇文章 4 订阅

订阅专栏

web基础

15 篇文章 1 订阅

订阅专栏

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

June.1

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
web基础学习（六）CSS3 文字阴影、文本溢出、服务器字体

1、给文字加阴影语法： text-shadow: h-shadow v-shadow blur color;h-shadow ：必需。水平阴影的位置。允许负值。v-shadow ：必需。垂直阴影的位置。允许负值。blur ：可选。模糊的距离。color ：可选。阴影的颜色。2、文本溢出处理固定用法：overflow: hidden; 溢出隐藏text-over...
复制链接

扫一扫