如何在网站上上传和使用任何字体？

Question

我想知道我们是否可以在我们的网站上上传任何字体？？我在哪里可以下载字体或 google 字体并将其直接上传到我的 css 文件中：

@font-face { font-family: 'Myriad Pro Regular'; 
font-style: normal;
font-weight: 300; 
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); }

而不是使用这种代码：

@import url(http://fonts.googleapis.com/css?family=Source+Sans Pro:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900italic,900);

谢谢

Answer 1

是的，正如@Jukka 所说，有些字体不是免费的，因此您必须进行搜索。幸运的是：

铁路 - http://www.fontsquirrel.com/fonts/raleway

和 Open Sans - http://www.fontsquirrel.com/fonts/open-sans

是免费的，所以你只需要下载 TTF（蓝色大按钮），zip 里面有整套字体的粗细和样式。

那么你有两个选择：

如您所述，将 .ttf 直接上传到您的 ftp 并将其调用到您的 css；或
使用 Webfont 生成器 (http://www.fontsquirrel.com/tools/webfont-generator) 创建其他类型（.woof、.eot、.svg），因为浏览器。

仅供参考，Chrome 在过去的几个版本 (< 39) 中有一些字体有问题，只有 .svg 扩展名纠正了这个错误。

Answer 2

见don’t use @import。

首选 LINK 标签：

<link rel='stylesheet' href='a.css'>

下载 Source Sans Pro webfont 并使用以下规则制作 CSS 文件：

@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-Regular.otf');
}
@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-Bold.otf');
    font-weight: bold;
}
@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-Italic.otf');
    font-style: italic;
}
@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-BoldItalic.otf');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-Light.otf');
    font-weight: 300;
}
@font-face {
    font-family: SourceSansPro;
    src: url('source-sans-pro/SourceSansPro-LightItalic.otf');
    font-style: italic;
    font-weight: 300;
}

Using a Custom Web Font

Answer 3

我在网上找到了这个 youtube 视频。它给出了一步一步的说明。

https://www.youtube.com/watch?v=KPwG67lEFdc

我在此处列出了转至 http://www.google.com/fonts/ 的步骤找到你喜欢的字体，点击快速使用link。再次向下滚动并复制如下所示的 link。 http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

接下来将字体集成到您的 CSS 中。 Google 字体 API 将生成必要的特定于浏览器的 CSS 以使用这些字体。您需要做的就是将字体名称添加到 CSS 样式中。例如：

字体系列：'Open Sans'，无衬线；

如何在网站上上传和使用任何字体？

How to upload and use any font on website?

css

upload

fonts

google-font-api