织梦Dede如何添加新字体？-织梦建站-盈思创科技

第一步：准备工作 - 获取并处理字体文件

在开始之前，你需要准备好你想要添加的字体文件，我们使用的是 Web字体，主要有以下几种格式，为了兼容性,最好能提供多种格式。

（图片来源网络，侵删）

选择字体格式：
- WOFF2 (.woff2): 压缩率最高，性能最好,是现代浏览器的首选。
- WOFF (.woff): 兼容性非常好,是事实上的Web字体标准。
- TTF (.ttf): TrueType字体，几乎所有系统都支持,但文件较大。
- EOT (.eot): 旧版IE浏览器（IE8及以下）专用的字体格式。
- SVG (.svg): 主要用于iOS设备上的SVG字体。
最佳实践： 准备一套包含 .woff2 和 .woff 的字体文件，可以覆盖市面上99%的浏览器。
获取字体文件：
- 商业字体： 购买商业字体授权,并获取Web字体授权。
- 免费字体： 从一些免费字体网站下载，并确认其授权允许用于Web。
  - Google Fonts (非常推荐,提供多种格式和CSS代码)
  - 思源黑体 / 思源宋体 (Adobe开源,质量极高)
  - 字由
处理字体文件（可选但推荐）：
（图片来源网络，侵删）
- 字体子集化: 如果你只需要用到字体中的部分汉字（比如网站标题），可以使用工具（如 font-spider 或在线工具）将字体文件变小,能极大提升网站加载速度。
- 字体托管: 你也可以选择将字体文件托管到其他CDN服务上，如 Google Fonts 或 fonts.gstatic.com，这样你就无需自己上传和管理文件，直接引入其CSS链接即可，这是最简单、最推荐的方式。

第二步：上传字体文件到网站

将你准备好的字体文件上传到你的织梦DedeCMS网站服务器上，为了方便管理和维护,建议创建一个专门的目录来存放字体文件。

通过FTP上传：
- 使用FTP工具（如FileZilla）连接到你的服务器。
- 进入网站的根目录（通常是 public_html 或 www）。
- 创建一个名为 fonts 的新文件夹。
- 将你的字体文件（my_new_font.woff2 和 my_new_font.woff）上传到这个 /fonts/ 目录下。
你的字体文件可以通过类似 https://www.yourdomain.com/fonts/my_new_font.woff2 这样的URL访问。

第三步：编写CSS代码定义字体

你需要创建一个CSS规则来告诉浏览器如何使用你刚刚上传的字体，这通常通过 @font-face 规则实现。

创建CSS文件：
- 在你的网站主题目录下（/templets/default/），创建一个新的CSS文件，命名为 custom-fonts.css。
- 或者，你也可以直接在你现有的主题样式文件（如 style.css 或 main.css）的末尾添加下面的代码。
编写 @font-face 代码： 打开你刚刚创建或选择的CSS文件,添加以下代码：
```
@font-face {
  font-family: 'MyNewFont'; /* 这是你给新字体起的名字，后面会用到 */
  src: url('/fonts/my_new_font.woff2') format('woff2'),
       url('/fonts/my_new_font.woff') format('woff');
  font-weight: normal; /* 字体粗细，normal是常规 */
  font-style: normal;  /* 字体样式，normal是正常 */
  font-display: swap;  /* 字体加载策略，swap表示先用系统字体显示，等新字体加载完再替换，提升用户体验 */
}
```
代码解释：
- font-family: 这是关键，你在这里定义的字体名称（如 MyNewFont）就是你将来在CSS中调用这个字体时使用的名字。
- src: 指向你的字体文件。url() 中的路径是相对于你网站根目录的。format() 告诉浏览器这个文件的格式,浏览器会优先使用它支持的格式。
- font-weight 和 font-style: 定义字体的粗细和样式，如果你的字体有粗体或斜体版本，你需要为它们也创建 @font-face 规则。
- font-display: swap;: 强烈推荐，这个属性可以防止因字体加载缓慢而导致的页面布局抖动或空白,提升用户体验。

第四步：引入新字体CSS文件

为了让网站能够识别你刚刚定义的字体，你需要将包含 @font-face 规则的CSS文件引入到你的网站中。

找到模板文件： 登录织梦DedeCMS后台，进入【模板】->【默认模板管理】。找到并打开你的首页模板文件，通常是 index.htm。

引入CSS文件： 在 <head> 标签内，找到其他CSS文件的引入语句（通常是 <link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_style/}/style.css" />），在其后面添加一行代码来引入你的新字体CSS文件。

<head>
    <meta charset="UTF-8">
    <title>{dede:global.cfg_webname/}</title>
    <!-- 其他CSS文件 -->
    <link rel="stylesheet" type="="text/css" href="{dede:global.cfg_templets_style/}/style.css" />
    <!-- 引入你的自定义字体CSS文件 -->
    <link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_style/}/custom-fonts.css" />
    <!-- 其他头部内容 -->
</head>

注意：{dede:global.cfg_templets_style/} 这个标签会自动解析为你的模板文件夹路径，/templets/default/。

第五步：在模板中使用新字体

万事俱备,你可以在任何需要的地方使用这个新字体了。

打开需要修改的模板文件： 你想修改网站标题的字体，打开首页模板 index.htm，找到网站标题的代码，通常是 <title> 标签或者一个 <h1>
```

<h1 class="header-title"><a href='{dede:global.cfg_cmsurl/}/'>{dede:global.cfg_webname/}</a></h1>
```



添加CSS类或直接修改样式：
你可以通过两种方式来应用新字体：


直接修改标签的 style 属性（简单直接）
<h1 style="font-family: 'MyNewFont', sans-serif;" class="header-title">
    <a href='{dede:global.cfg_cmsurl/}/'>{dede:global.cfg_webname/}</a>
</h1>

font-family: 'MyNewFont', sans-serif;: 这里使用了你在 @font-face 中定义的字体名 MyNewFont，后面的 sans-serif 是一个后备字体，如果浏览器因为某种原因无法加载你的新字体，它会使用一个无衬线的默认字体（如 Arial, Helvetica）作为替代,这是一个好习惯。



在CSS文件中定义类（更推荐，便于复用）
在你的主题主样式文件（如 style.css）中,为这个元素添加一个CSS类：
.header-title a {
  font-family: 'MyNewFont', sans-serif;
  /* 你还可以添加其他样式，如字体大小、颜色等 */
  font-size: 36px;
  color: #333;
}
然后确保你的HTML标签上有这个 class：
<h1 class="header-title"><a href='{dede:global.cfg_cmsurl/}/'>{dede:global.cfg_webname/}</a></h1>



第六步：更新缓存并查看效果


更新网站缓存：
在织梦后台，点击【系统】-> 【一键更新网站】-> 【更新主页】，这一步非常重要，因为织梦有模板缓存,不更新可能看不到效果。


清除浏览器缓存：
按 Ctrl + F5 (Windows) 或 Cmd + Shift + R (Mac) 强制刷新浏览器,确保加载的是最新的CSS文件。


检查效果：
现在访问你的网站,你应该能看到指定位置的文字已经变成了你新添加的字体。


总结与最佳实践

性能优先： 尽量使用WOFF2格式，并对字体进行子集化,减小文件体积。
使用CDN： 如果不想自己托管，直接使用Google Fonts等CDN服务是最省心的方式，你只需在 <head> 中引入它提供的 <link> 标签即可，无需上传文件和编写 @font-face。
优雅降级： 在 font-family 中始终提供一个或多个后备字体,以防新字体加载失败。
字体加载策略： 使用 font-display: swap; 来优化用户体验。
版权意识： 务必确认你所使用的字体拥有Web字体使用的授权,避免法律风险。

通过以上六个步骤,你就可以成功地在织梦DedeCMS中添加并使用任何你喜欢的字体了。

织梦Dede如何添加新字体？

第一步：准备工作 - 获取并处理字体文件

第二步：上传字体文件到网站

第三步：编写CSS代码定义字体

第四步：引入新字体CSS文件

第五步：在模板中使用新字体

第六步：更新缓存并查看效果

总结与最佳实践

相关文章

目录[+]