如何在CSS中添加新字体以进行本地测试

Question

我目前正在制作一个以这种方式从Google字体导入所需字体的网页：

@import url(http://fonts.googleapis.com/css?family=Italianno);

问题是每次加载页面时我都需要连接到Internet，加载字体也需要时间。有没有办法我可以离线加载字体，因为在测试页面时我会无数次刷新它，我可能不会一直连接到互联网而且我不想等待每次加载字体需要3-5秒。

我尝试在系统中安装字体，然后在CSS中使用它。它没有用。

Answer 1

嘿用css文件夹创建一个字体文件夹，并在那里放置所需的字体。然后在CSS中调用此代码作为MeriyoUI字体的示例，如下所述。这会将字体加载到您的应用上。

为此你只需要下载字体并将其放在fonts文件夹中。 （先决条件）。尝试使用网络安全字体。

希望它有所帮助。

<强> CSS

@font-face
{
    font-family: 'Meiryo UI';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/MeiryoUI.ttf');
}

Answer 2

1。在网站目录中创建文件夹，并移动您的字体     它！ （.ttf，.eot，.woff）

示例：目录 - ＆gt;网络字体

2。为此创建css文档！

示例：目录 - ＆gt; css - ＆gt; webfont.css

3。将此代码用于webfonts.css

@font-face {
  font-family: 'name';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/fontname.eot');
  src: url('../webfonts/fontname.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/fontname.woff2') format('woff2'),
       url('../webfonts/fontname.woff') format('woff'),
       url('../webfonts/fontname.ttf') format('truetype');
}

4。并在haed元素的第一行中进入您的网页，请使用以下代码：

<link rel="stylesheet" href="css/webfonts.css" type="text/css"/>

Answer 3

使用CSS3 @ font-face。尝试从任何字体生成器（如http://www.fontsquirrel.com/tools/webfont-generator）制作字体的字体。要了解如何使用它们，请查看http://css-tricks.com/snippets/css/using-font-face/