CSS字体的font-family属性和@font-face使用方法

article/2025/10/25 3:54:05

CSS字体的font-family属性:

font-family属性一共有5个字体系列,分别是:
sans-serif: 包括没有衬线的字体,与serif相比,通常认为sans-serif在计算机屏幕上更容易识别。
在这里插入图片描述

serif: 包括有衬线的字体,看到这种字体就会想到新闻报纸的文字排版。
在这里插入图片描述

monospace: 包含固定宽度的字符,例如,一个“i”在水平方向所占宽度与一个“m”所占宽度是相同的,主要用于显示软件代码示例。
在这里插入图片描述

cursive: 包括看似手写的字体,有时会看到标题中运用这些字体。
在这里插入图片描述

fantasy: 包含有某种风格的装饰性字体。
在这里插入图片描述

使用规则
例子:给body标签添加样式

body {font-family: Verdana, Geneva, Arial, sans-serif;
}

通常指定的font-family包含一个候选字体系列列表,它们都来自同一个字体系列。
候选字体要完全按照输入要求进行输入,大小写必须一致
最后总是放一个通用的字体系列名,如“sans-serif”,“serif”,因为计算机会从第一个字体开始查看电脑上是否有这个字体,如果有这个字体则应用这个字体,如果没有就会查询下一个字体,要是全部候选字体都没有查到则会使用浏览器默认的“sans-serif”字体(根据最后一个来决定使用什么默认字体),这就是为什么需要在最后面添加通用字体系列名的原因。

@font-face规则的使用:

这个规则允许你定义一种字体的名字和位置,然后可以在你的页面使用。
使用步骤:
1.先从字体网站下载自己需要的字体
2.确保下载的字体中包含所需字体的所有格式
常用字体扩展名包含:“.ttf”,“.otf”,“.eot”,“.svg”,“.woff”
如果没有的话可以进入网站(https://www.fontsquirrel.com/)进行如下操作:
(1)进入网站,点击发电机(Generator)
在这里插入图片描述
(2)依次点击上传字体、最佳、协议和下载套件在这里插入图片描述
(3)解压压缩包即可得到其他扩展名的字体
3.在自己的Web项目中建立的fonts文件夹中导入下载好的字体
在这里插入图片描述
4.将字体包中自带的stylesheet.css样式表导入项目的css文件夹下,并修改@font-face的src路径
在这里插入图片描述
5.在.html文件中导入css样式表
在这里插入图片描述
6.在stylesheet.css样式表中给自己想要添加该样式的属性添加样式,这里的font-family属性值必须和@font-face中的一样。
在这里插入图片描述
7.保存代码,运行即可。


http://chatgpt.dhexx.cn/article/aDy63U41.shtml

相关文章

前端漂亮的字体 font-family

今天在看UI图的时候看到这种字体,给大家分享分享,直接上图 图一 利用字体系列font-family div{font-size: .7rem;color: #ffeb7b;/* 黄色 */font-family: electronicFont; /* 这是重点!!! */ }图二 利用文字阴影text-…

【CSS】font-family的相关字体设置

大家都知道,在不同操作系统、不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽相同,那么如何设置字体显示效果会比较好呢?下面我们逐步的分析一下: 一、字体基础知识 css 中…

Web 字体 font-family 浅谈

前言 最近研究各大网站的font-family字体设置,发现每个网站的默认值都不相同,甚至一些大网站也犯了很明显的错误,说明字体还是有很大学问的,值的我们好好研究。 不同的操作系统、不同浏览器下内嵌的默认字体是不同的,错…

font-faimly字体大全

清 font-size:100px 为例 font-family:“Arial”,“Microsoft YaHei”,“黑体”,“宋体”,sans-serif; font-family:Tahoma,Helvetica,Arial,‘宋体’,sans-serif; font-family: ‘Microsoft YaHei’,arial,tahoma,\5b8b\4f53,sans-serif; font-family:Tahoma,Helvetica,A…

html字体设置font-family

<div ><p style"font-family:STHeiti">1.华文黑体:STHeiti</p><p style"font-family:STKaiti">2.华文楷体&#xff1a;STKaiti</p><p style"font-family:STSong">3.华文宋体&#xff1a;STSong</p>&l…

html常用font-family设置字体样式

<table border"1" cellpadding"0" cellspacing"0" ><tr><td><h3 style"font-family: 黑体;">黑体&#xff1a;SimHei</h3></td><td><h3 style"font-family: 华文黑体;">华…

font-family、font-style、font-weight、font-variant的区别「In CSS」

学习 CSS&#xff0c;看文档的时候总是对 font 的属性搞不清楚或者总是搞混。 这里总结一下这四个经常搞混的&#xff08;特别是前面两个&#xff09;。 font-family 这个属性指的是字体&#xff0c;比如说汉字中常说的行书与草书。 这个属性的值可以有多个&#xff0c;因为…

FontFamily 看这里就够了

TextView中字体设置 typeface 一、配置设置 代码方式设置 fontFamily 文字如何实现加粗、斜体&#xff1f; 三者之间的关系 自定义字体 参考&#xff1a; TextView中字体设置 textView中有三个属性可以设置字体 textStyle&#xff1a;设置样式fontFamily&#xff1…

WPF—WrapPanel布局

WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列&#xff0c;当长度或高度不够是就会自动调整进行换行&#xff0c;后续排序按照从上至下或从右至左的顺序进行。 Orientation——根据内容自动换行。当 Horizontal选项看上去类似于Windows资源管理器的缩略图视图&…

WrapPanel

WrapPanel将子元素自左向右逐个地排列, 若一个水平行中放不下,就排在下一行。面板的方向可以是水平或垂直的 <Window x:Class"Panel布局.WrapPanelxaml"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.…

WPF中5种内建面板Canvas、StackPanel、WrapPanel、DockPanel、Grid分析

https://blog.csdn.net/weixin_43437202/article/details/88292620 Canvas、StackPanel、WrapPanel、DockPanel和Grid是WPF中主要的5种内建面板&#xff0c;这些面板类都位于System.Windows.Controls命名空间下。 主要布局特点简述 Grid 按行列排列内容&#xff0c;如果没有特…

WPF 改进 WrapPanel 右侧填充

WPF 改进 WrapPanel 右侧填充 本文经原作者授权以原创方式二次分享&#xff0c;欢迎转载、分享。 WPF 改进 WrapPanel 右边缘填充 作者&#xff1a;陈-林-赵-魏|驚鏵 原文链接[1]&#xff1a;https://www.cnblogs.com/wandia/p/17084881.html 目的&#xff1a;改进下WrapPanel,…

WrapPanel 实现虚拟化

WrapPanel 实现虚拟化 控件名&#xff1a;VirtualizingWrapPanel 作者&#xff1a;WPFDevelopersOrg 原文链接&#xff1a; https://github.com/WPFDevelopersOrg/WPFDevelopers 框架使用大于等于.NET40&#xff1b;Visual Studio 2022;项目使用 MIT 开源许可协议&#xff1…

对wpf 的入门记录总结----面板控件Canvas、WrapPanel、StackPanel、DockPanel

面板是WPF裡其中一個很重要的控件。 面板扮演著裝載其他控件的容器的角色&#xff0c;同時也控制著頁面和視窗的佈局。 由於一個視窗只允許一個子控件&#xff0c;因此面板經常會被使用於分隔空間&#xff0c;這樣每個空間就會有一個控件或者面板。 wpf支持6种面板&#xff1…

listbox 表头自动换行_WPF让ListView或ListBox中的WrapPanel 自动换行

原文:WPF让ListView或ListBox中的WrapPanel 自动换行 在ListView或者ListBox中使用WrapPanel想让ItemTemplate中的内容像下图这样先横向平铺然后再纵向换行&#xff0c;默认设置是不能实现的。 图1. 横向平铺再纵向换行的效果示例 请注意最关键的在上面代码中第一行的“ScrollV…

WPF教程三:布局之WrapPanel面板(转 )

WPF教程三&#xff1a;布局之WrapPanel面板 WrapPanel&#xff1a;环绕面板 WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列&#xff0c;当长度或高度不够时就会自动调整进行换行&#xff0c;后续排序按照从上至下或从右至左的顺序进行。 Orientation——根据内容自…

WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel

WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel 回顾 上一篇&#xff0c;我们介绍了基本控件及控件的重要属性和用法&#xff0c;我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景&#xff0c;当 然这些都是本人在实际项目中的使用经验&#xff0c;可能…

2021-08-16 WPF控件专题 WrapPanel 控件详解

1.WrapPanel 控件介绍 流面板 子元素按顺序排列&#xff0c;如果按水平方向:从左到右&#xff0c;超出部分&#xff0c;自动换行到下一行 垂直 从上到下&#xff0c; 下一列 排列方向&#xff1a;Orientation ItemWidth ItemHeight 调整面板的尺寸时&#xff0c;内部子元素的…

.NET WPF(3)布局之WrapPanel面板

一.WPF&#xff08;3&#xff09;布局之WrapPane面板 1. WrapPanel&#xff1a;环绕面板 WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列&#xff0c;当长度或高度不够时就会自动调整进行换行&#xff0c;后续排序按照从上至下或从右至左的顺序进行。 Orie…

WPF编程基础入门 ——— 第三章 布局(五)布局面板WrapPanel

WPF布局——布局面板WrapPanel WPF——WrapPanel布局控件WrapPanel实例——十个按钮 WPF——WrapPanel布局控件 WrapPanel(自动折行面板)&#xff0c;允许任意多的子元素按照声明的先后顺序&#xff0c;从左往右摆放&#xff0c;摆满一行后&#xff0c;自动折行。折行面板的经…