Question

我使用两个字体系列，1＆＃34;打开sans＆＃34; 2. Colvetica。我这些字体遇到了这种问题。

1）我使用像这样的开放sans＆＃34; font-family：＆＃39; Open Sans＆＃39 ;; ＆＃34;在CSS文件中。它只适用于安装了open sans的计算机。但在移动设备中，这根本不起作用。

2）对于colvetica，我使用了它但没有工作。我不知道如何使用它。我使用colvetica字体文件，但同样的问题。如何使用这种字体？

我需要在同一页面中使用opensans和colvetica。像colvetica

Answer 1

您需要在网站中包含字体，以及在线提供css文件的链接

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

或者您可以使用@font-face{}

将字体包含到网站中

Answer 2

您需要使用Google字体或@ font-face导入。

在Google字体中，您可以使用HTML或CSS导入：

关于您的HTML：

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

关于你的CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

如果您在google.com/fonts找不到字体，可以创建自己的字体工具包：http://www.fontsquirrel.com/tools/webfont-generator（您可以生成所有内容，包括嵌入字体的css代码），所以不是全部字体可以转换。查看在正确的URL中创建它的路径

Answer 3

来自css-tricks.com

如何使用css

托管和嵌入字体文件

<style>
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
</style>

Answer 4

您需要为他们提供下载字体的方法。

放@import url('http://fonts.googleapis.com/css?family=Open+Sans') 在你的CSS顶部。这已在this question by another user.

中介绍

字体在HTML页面

4 个答案: