使用@font-face模块需要遵循以下规则：

1. 将自定义字体上传到服务器中。

2. 使用@font-face显式指定自定义字体的名称以及引用自定义字体的来源。

3. 在目标元素上通过font-family调用自定义字体。
   

应用于现代浏览器的字体具有多种格式，主要包括：

• TrueType（.ttf）格式。是Windows和iOS系统最常见的字体格式。

• OpenType（.otf）格式。是一种原始的字体格式，内置于TrueType基础之上，可提供更多功能。

• Web Open Font Format（.woff）格式。是Web字体的最佳格式，是一个开放的TrueType/OpenType的压缩版本，支持元数据包的分离。

• Embedded Open Type（.eot）格式。是IE专用格式。

• SVG（.svg）格式。是基于SVG字体渲染的一种格式。

为了使更多的浏览器可以支持自定义字体，建议使用以下代码进行设置：

@font-face {
    font-family:"FontName";
    src:url("FontName.eot");   /*IE9兼容模式*/
    src:url("FontName.eot?#iefix") format("embedded-opentype"),   /*IE6~IE8*/
    url("FontName.woff") format("woff"),   /*现代浏览器*/
    url("FontName.ttf") format("truetype"),   /*Safari,Android,iOS*/
    url("FontName.svg# FontName") format("svg");   /*Legacy iOS*/
}
/*调用自定义字体*
p { font-family:"FontName";}