成都搭建网站服务

2022-07-28 分类：网站建设

成都搭建网站服务在您的网站上添加独特的字体是使您的设计脱颖而出的好方法。

在本文中，我将逐步指导您向网站添加任何字体。

注意：由于并非所有网站都是以相同的方式构建和管理的，因此，我将介绍添加自定义字体的最通用的方法，然后说明最受欢迎的网站构建平台如何支持自定义字体。

内容：

网络上可以使用什么字体？

不同的字体格式和浏览器支持

如何使用@ font-face添加自定义字体（CSS规则）

内容管理系统如何支持自定义字体

网站建设者如何支持自定义字体

网络上可以使用什么字体？

从技术上讲，您几乎可以将任何字体添加到任何网站。

但是，在联机搜索字体时，您始终要牢记价格，许可协议和安装方法。

事不宜迟，以下是一些最受欢迎的字体库，可帮助您找到理想的字体：

Google字体（免费）

Google字体拥有令人印象深刻的库，其中包含将近1000种免费许可证字体，可以通过其交互式Web目录进行浏览。由于开发者API的存在，可以说Google字体是最容易添加到您的网站以及我建议您开始搜索的字体。

相关：最受欢迎的20种最流行的Google字体

Adobe字体（高级）

Adobe字体（以前为Typekit）提供了+14,000种令人惊叹的字体的集合。现在，这项经过改进的新服务使Creative Cloud订户可以通过单击按钮轻松访问其整个字体库。与Typekit不同，Adobe Fonts取消了对页面视图的限制，并使所有字体均可在桌面和Web上使用。

注意：Creative Cloud订阅（带有Adobe字体）的起始价格为$ 20,99 /月。

成都搭建网站服务自定义字体（字体松鼠）

除了提供许可用于商业用途的免费字体之外，Font Squirrel还以其Font Identifier 和 Font Generator闻名。

Webfont Generator允许您将合法拥有权利的任何字体转换为（.ttf或.otf文件格式），并将其转换为可用的WebFont工具包，其中包括易于使用的层叠样式表（CSS）。

不同的字体格式和浏览器支持

在过去的几年中，现代浏览器极大地改善了它们支持自定义字体的方式。但是，即使在今天，并非所有浏览器都支持所有格式。

以下是最受欢迎的浏览器以及它们当前支持的字体格式：

（来源：https : //www.w3schools.com/Css/css3_fonts.asp）

我总是建议您使用TTF / OTF和WOFF来确保所有浏览器都支持您的字体。

有关受支持的字体格式的更多详细信息，请尝试 “我可以使用 -一种用于研究不同浏览器版本（免费）的功能兼容性的出色工具”。

如何使用@ font-face将自定义字体添加到您的网站

下面说明的@ font-face CSS规则是向网站添加自定义字体的最常用方法。

步骤1：下载字体

成都搭建网站服务在您的网站上找到要使用的自定义字体，然后下载TrueType字体文件格式（.ttf）。您还可以下载OpenType字体格式（.otf）

步骤2：创建用于跨浏览的WebFont工具包

将您的.ttf或.otf文件上传到 Webfont生成器，然后下载Web字体工具包。

步骤3：将字体文件上传到您的网站

使用FTP或文件管理器，将Web字体工具包中找到的所有字体文件上载到网站。*通常，该工具包将包含多个文件扩展名，例如（.eot），（。woff），（。woff2），（。 ttf）和（.svg）。

您的工具包还将包含级联样式表（.css），您需要在第4步中进行更新和上传。

*此步骤将根据您网站的构建和托管方式而有很大不同。

步骤4：更新并上传您的CSS文件

在诸如Textedit，NotePad或Sublime之类的文本编辑器中打开CSS文件。

通过上传每个文件，将现有的源URL替换为您创建的新URL。成都网络外包找创新互联 13518219792

默认情况下，源URL位置在下载的Web字体工具包中设置。需要用服务器上的位置替换它。

这是一个简单的例子：

更新之前：

@ font-face {

font-family：“ CustomFont”;

src：url（“ CustomFont.eot”）;

src：url（“ CustomFont.woff”）format（“ woff”），

url（“ CustomFont.otf”）format（“ opentype”），

url（“ CustomFont.svg＃filename”）format（“ svg”）;

}

更新后：

@ font-face {

font-family：“ CustomFont”;

src：url（“ https://yoursite.com/css/fonts/CustomFont.eot”）;

src：url（“ https://yoursite.com/css/fonts/CustomFont.woff”）格式（“ woff”），

url（“ https://yoursite.com/css/fonts/CustomFont.otf”）格式（“ opentype”），

url（“ https://yoursite.com/css/fonts/CustomFont.svg#filename”）format（“ svg”）;

}

更新CSS文件后，您需要将其上传到您的网站（服务器）。

步骤5：在CSS声明中使用自定义字体

现在，您的层叠样式表和字体文件已上传到服务器，您可以开始在CSS声明中使用自定义字体，以帮助改善HTML的外观。

这可以通过多种方式完成，包括将站点范围的声明添加到主CSS文件中。

这是一个简单的示例：

h1 {

font-family：'CustomFont'，Arial，sans-serif;

font-weight：normal;

font-style：normal;

}

如何在流行的网站构建工具中添加字体

内容管理系统（WordPress，Drupal，Joomla等）

您可以通过几种不同的方式将自定义字体添加到诸如WordPress（WP）之类的内容管理系统（CMS ）中：

使用@ font-face CSS添加自定义字体使用 WordPress插件添加字体从Google字体手动添加字体

一般来说，将自定义字体添加到CMS时，上面显示的5步过程将是默认方法。尽管对于熟悉代码操作的人员来说，该过程似乎非常简单，但是新手用户通常会寻找替代方案。

如果您使用的是WP，并且没有任何编辑源代码（主题文件）的经验，那么您很可能希望依靠版式插件。插件使添加自定义字体变得更加容易，而无需自己编写任何代码。

使用WP插件时，我要注意的是，它们可能会在您的网站上引起各种问题。在您的网站上使用插件之前，务必先研究插件。

最后，由于Google字体提供了开发人员API，因此您还可以选择使用functions.php文件将这些字体“ 手动添加 ”到主题中。

网站建设者（PageCloud，Squarespace，Wix，Weebly）

在线上有大量的网站构建器选项，它们以不同的方式管理自定义字体。

Google字体

在大多数情况下，顶级网站建设者可以轻松地从热门网站（如Google字体）添加字体。

例如，使用PageCloud，添加来自Google的字体再简单不过了。您所需要做的就是复制并粘贴字体，瞧，您的字体已添加到页面中，可以用任何方式设置样式！

但是，并非所有的网站建设者都可以轻松地添加Google字体。

例如，在Weebly中添加Google字体将需要您编辑网站的源代码（CSS）。他们在自己的知识库中解释了 8个步骤的过程。

以下是顶尖的网站建设者以及他们如何管理Google字体的简短列表：

页面云

广场空间

蜡

Shopify

网络流

如您所见，每个网站构建器都使用不同的方法来添加字体，字体的范围从非常简单到有些复杂。

自定义字体

在大多数情况下，当希望添加Google字体中不存在的自定义字体时，您需要在网站上编辑CSS。根据您决定使用的网站构建器，此过程可能会大不相同。

我建议您搜索他们各自的知识库和社区论坛以获取更多信息。

例如，使用PageCloud添加自定义字体的过程与上面提供的分步指南非常相似。

摘要

无论您有使用CSS的经验如何，都可以按照本文中的说明进行操作，以将字体添加到任何网站构建平台。

但是，一旦您将想要的字体成功添加到网站上，您需要提出的问题是：

您是否可以自定义字体的外观？（字体粗细，颜色，行高，字母间距，不透明度等）是否可以自定义网站布局以使字体脱颖而出（文本，图像，视频等的位置）

如果您没有使用CSS的丰富经验，那么在使用CMS或基于严格模板的网站构建器（例如SquareSpace）时，这些自定义设置可能会非常具有挑战性。

这就是为什么我建议使用诸如PageCloud之类的灵活网站构建器的原因，该构建器在寻求创建具有几乎无限的样式和字体选项的独特布局时为您提供无与伦比的灵活性。

分享题目：成都搭建网站服务
标题网址：/news20/183070.html

成都网站建设公司_创新互联，为您提供网站制作、定制开发、品牌网站建设、网站建设、自适应网站、网站改版

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容