html字体及文本样式设置

最新推荐文章于 2024-09-11 20:31:47 发布

pcコンメンット

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量7.7k

点赞数 11

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_65214572/article/details/125912521

版权

本文详细介绍了Web中颜色、字体样式的CSS属性，包括颜色设置、字体风格、字体粗细、字体大小、字体家族的选择以及缩写格式。此外，还探讨了如何引入网络字体，如通过@font-face规则加载自定义字体，以及如何使用iconfont和font-awesome这样的图标库。文章最后提到了文本装饰、对齐、缩进等相关属性，以及列表样式和其他样式设置。

摘要由CSDN通过智能技术生成

文本属性

-颜色属性

color:black

or color:rgb(255,255,255)

or color:rgba(255,0,0,0.5) 第四个为透明值设置，取值0-1

or color:#000 十六进制

- font-style 用于打开和关闭斜体文本

font-style:italic;斜体 normal 正常

- font-weight 为字体设置粗细程度

font-weight:bold; 加粗，值为700，值有100-900的整数，其中400为正常

bolder 比加粗还要粗

lighter 细线

- font-size 为文字指定大小

- font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体

1.如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加

2.设置的字体必须是用户电脑里面已经安装的字体

3.如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体

4.如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办? 可以给字体设置备选方案格式:font-family:"字体1", "备选方案1", ...;

5.如果想给中文和英文分别单独设置字体, 怎么办? 但凡是中文字体, 里面都包含了英文但凡是英文字体, 里面都没有包含中文也就是说中文字体可以处理英文, 而英文字体不能处理中文注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

6.补充在企业开发中最常见的字体有以下几个中文: 宋体/黑体/微软雅黑英文: "Times New Roman"/Arial

- 缩写格式

font:style weight size family;

-网络字体

推荐：WebFont-为你的网页锦上添花_字体网

使用时需要在style里引用存下来的font-face

即上图代码

整体使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    @font-face{font-family:'ZoomlaWenzhengming-A064'; /*逐浪文征明吴门狂草书*/
    src: url('https://code.z01.com/font/ZoomlaWenzhengming-A064.eot?#iefix'); /* IE9 */
    src: url('https://code.z01.com/font/ZoomlaWenzhengming-A064.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */
    url('https://code.z01.com/font/ZoomlaWenzhengming-A064.woff') format("woff"), /* chrome、firefox */
    url('https://code.z01.com/font/ZoomlaWenzhengming-A064.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url('https://code.z01.com/font/ZoomlaWenzhengming-A064.svg#ZoomlaWenzhengming-A064') format("svg"); /* iOS 4.1- */
    }
        div{
            font-family:'ZoomlaWenzhengming-A064';
        }
    </style>
</head>
<body>
    <div>段落标签哒</div>

</body>
</html>

- 字体图标

iconfont:iconfont-阿里巴巴矢量图标库

在其中找到自己喜欢的图标

通过右上角图标进入购物车

点击下载代码，并将下载好的代码放到和html同级别的文件夹中等待引用

在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 两种方式 推荐iconfont font-awesome -->
	<!-- 1.1 iconfont 单色图标库使用 引入样式文件-->
	<link rel="stylesheet" href="../download/font_9saqil75th/iconfont.css">
	<!-- 2.1 使用iconfont多色图标库 -->
	<!-- script是书写js代码的区域 src引入js文件 -->
	<script src="../彩色/font_3536593_hr7w0y2hsga/iconfont.js"></script>
	<style>
	.icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
	.iconfont{
		color: blue;
		}
	</style>
</head>
<body>
	<!-- 1.2使用单色图标 -->
	<i class="iconfont icon-jiankangzhibiaojiance"></i>
	<!-- 2.2使用多色图标 -->
	<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-shutiao"></use>
  </svg>
</body>
</html>

font-awesome:Font Awesome，一套绝佳的图标字体库和CSS框架

引用需要去https://www.bootcdn.cn/ 找到对应的font-awesome链接。我们用的版本是4.7.0，所以找到对应版本，并复制链接进行引用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>、
	<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
	<i class="fa fa-bank"></i>
</body>
</html>