1、下载您想要的网站字体 100font.com - 免费字体下载 - 免费商用字体下载网站

2、如果下载的字体文件是TTF格式，不能在网站上直接使用，则需要转换成eot、svg、woff格式，这里提供一个网站字体转换网站，字体在线转换

css如何引入网站本地字体文件

@font-face{
	font-family:raleway-light;  /*为引入的字体文件起名，可以为任意名*/
	src:url('../font/raleway-light.woff'), /*引入字体*/
     /*引入不同格式的字体，每种浏览器对字体兼容性不一样，所以需要引入不同格式字体*/
	url('../font/raleway-light.otf')format('otf'); 
}
/**
字体2 ，注意 最后一个字体结束是 ; 号
**/
@font-face { 
    font-family: 'InterRegular';
    src: url('font/Inter-UI-Regular.woff2') format('woff2'),
         url('font/Inter-UI-Regular.woff') format('woff');
}


body {
  font-family: 'raleway-light'; /*引入字体起的名字*/
  color:#222222;
  font-size: 16px;
}
div{
    font-family: 'InterRegular', sans-serif; /*引入字体起的名字*/
}

引入cdn外部字体

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

• 系统字体: 直接通过 font-family 指定系统已安装的字体。
• 外部字体: 通过 <link> 标签在HTML中引入字体，然后在CSS中使用。
• 本地字体: 使用 @font-face 在CSS中引入字体文件并指定名称，然后在 font-family 中使用。

为什么要引入多个字体文件？ 多个字体文件对网站加载速度的影响！

• 浏览器兼容性： 不同浏览器对不同字体格式的支持程度不同。例如，较早版本的Safari不支持WOFF2格式，Internet Explorer不支持TTF和OTF。
• 加载优化： WOFF2通常是最优的选择，因为它压缩率高，加载速度快。如果浏览器支持WOFF2，它将优先使用这个文件；如果不支持，则会回退到支持的格式，如WOFF或TTF。

网站加载速度的影响

浏览器会自动选择并下载第一个可用的字体文件，剩余的文件则不会被下载。因此，多个字体文件不会显著拖慢网站的加载速度。

常见的字体文件格式

• WOFF (Web Open Font Format): 这是一种为Web优化的字体格式，得到大多数现代浏览器的支持。
• WOFF2: 是WOFF的更新版本，提供了更高的压缩率，因此加载速度更快，但并非所有浏览器都支持它。
• TTF (TrueType Font): 一种比较旧的字体格式，兼容性较广，但文件体积相对较大。
• OTF (OpenType Font): 结合了TrueType和PostScript字体的优点，支持更复杂的字形设计。
• EOT (Embedded OpenType): 主要用于早期版本的Internet Explorer，但在现代浏览器中不常用。
• SVG (Scalable Vector Graphics): 主要用于支持早期的移动设备，但现在很少使用。

font-family 还有哪些其他的参数

1、serif: 有衬线字体，字体字形带有小装饰线，给人一种正式和经典的感觉。常见的有 Times New Roman, Georgia。

font-family: 'Times New Roman', serif;

2、monospace: 等宽字体，每个字符占用相同的宽度，常用于代码显示。常见的有 Courier New, Consolas。

font-family: 'Courier New', monospace;

3、cursive: 手写体或草书字体，通常模仿手写风格。常见的有 Brush Script, Comic Sans MS。

font-family: 'Comic Sans MS', cursive;

4、fantasy: 装饰性字体，设计上具有独特的装饰风格。常见的有 Impact, Papyrus。

font-family: 'Impact', fantasy;

5、system-ui: 系统默认的用户界面字体，常用于应用程序中以匹配操作系统的字体风格。

font-family: system-ui;

注意：字体后缀和浏览器有关，如下所示
* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera 
* .EOT，适用于Internet Explorer 4.0+ 
* .SVG，适用于Chrome、IPhone 

默认字体设置

//font-family：定义文本使用的字体族。字体族中的每个字体按顺序优先使用，如果前面的字体不可用，则使用后面的字体。为了提高跨平台和跨浏览器的兼容性，并确保文本在不同设备和操作系统上都能有一个良好的显示效果。这些字体通常是在用户本地的操作系统中预装的，不需要放在网站里。

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

1. -apple-system：Apple设备（如Mac、iPhone）上的系统字体。
2. BlinkMacSystemFont：Google Chrome浏览器在Mac上的系统字体。
3. "Segoe UI"：Windows系统上的默认界面字体。
4. "Helvetica Neue" 和 Arial：广泛应用于许多操作系统和设备。
5. "Noto Sans"，"Liberation Sans"：开源字体，可能会预装在一些操作系统中。