手把手教你如何下载大厂页面的字体——开发

在商城开发中,有些网上比较好看的字体想要下载该怎么办呢?接下来详细介绍一下
拿小米商城举例:https://www.mi.com/在这里插入图片描述
这个搜素框中的搜索符号其实是一种字体,那么如何来下载这种字体呢?
步骤:
右键——》点击检查——》Network——》Font——》点击一下你要下载的字体——》点击一下date:application
在这里插入图片描述
复制这段文字 。注意:方框中的不要,连逗号都不能要
在这里插入图片描述
到这里结束
在这里插入图片描述

接下来将base64格式的字体信息解码成可用的字体文件
进入这个网址解码:https://www.motobit.com/util/base64-decoder-encoder.asp

在这里插入图片描述
选择以上三个选项,就会自动下载一个叫base64.bin的文件,再命名为.otf格式,例如:
在这里插入图片描述
这样我们的字体也就算下载好了。

然后,在你的project(工程)里面可以新建一个font,将上面的文件复制粘贴到里面去,如
在这里插入图片描述
我们去到小米商城页面去拿这个搜索框。
在这里插入图片描述
复制引号里面的东西(这个特殊字体就是刚刚的搜索框)
在这里插入图片描述
测试代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	         @font-face {
     
     
	         	font-family:"xiaomiziti";
	         	src:url("font/xiaomiziti.otf");
	         }
         
			#Jay{
     
     
				font-family: "xiaomiziti";
			}
		</style>
	</head>
	<body>
		<div id="Jay">
			<label for="search">你想搜什么?</label></div>
	</body>
</html>

注意:我在这行代码

<label for="search">你想搜什么?</label>

下面有在这里插入图片描述这个符号

运行效果:

在这里插入图片描述
这样就算是测试成功啦,希望此小文可以对你有帮助!欢迎一键三联哈哈哈
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/hanhanwanghaha/article/details/108916714