Question

我想知道如果我们可以在我们的网站上传任何字体？我在哪里可以下载字体或谷歌字体并将其直接上传到我的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

请参阅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 2

我在网上发现了这个YouTube视频。它一步一步地给出了说明。

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

我列出了这里的步骤转到http://www.google.com/fonts/ 找到您喜欢的字体，单击快速使用链接。再次向下滚动并复制如下所示的链接。 http://fonts.googleapis.com/css?family=Open+Sans'rel ='样式表'type ='text / css'＆gt;

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

font-family：'Open Sans'，sans-serif;

Answer 3

正如@Jukka所说，有些字体是免费的，所以你必须搜索。运气就是：

Raleway - http://www.fontsquirrel.com/fonts/raleway

并打开Sans - http://www.fontsquirrel.com/fonts/open-sans

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

然后你有两个选择：

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

仅供参考，过去几个版本中的Chrome（＆lt; 39）在使用某些字体时出现问题，只有.svg扩展程序更正了该错误。

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

3 个答案: