文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在CSS中添加新字体以进行本地测试

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

Stack Overflow用户

提问于 2014-06-09 05:06:56

回答 3查看 5.2K关注 0票数 0

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

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

问题是，每次我加载页面时，我都需要连接到Internet，而且加载字体也需要时间。有什么方法可以脱机加载字体吗?因为在测试页面时，我会刷新它无数次，而且我可能不会一直连接到互联网上，而且我不想每次都等待3到5秒的时间来加载字体。

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

html

css

fonts

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-06-09 05:12:26

嘿，用css文件夹制作一个字体文件夹，并把想要的字体放在那里。然后在CSS中调用此代码作为MeriyoUI字体的示例，如下所述。这将加载字体到您的应用程序。

为此，您只需下载字体并将其放入字体文件夹。(先决条件).Try使用网络安全字体。

希望能帮上忙。

CSS

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

票数 4

Stack Overflow用户

发布于 2014-06-09 05:58:47

1.在网站目录中创建文件夹，将字体移动到该文件夹！( .ttf，.eot，.woff )

示例:目录-> webfonts

2.为此创建一个css文档！

示例:目录-> css -> 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"/>

票数 1

Stack Overflow用户

发布于 2014-06-09 05:15:45

使用CSS3 @字体。试着从像这个http://www.fontsquirrel.com/tools/webfont-generator这样的任何字体生成器中制作字体面板。要学习如何使用它们，请在这里查看一下http://css-tricks.com/snippets/css/using-font-face/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24113967

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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