Question

我正在尝试创建HTML屏幕。这些是模型屏幕，我不会在任何应用程序服务器中部署。我创建了自定义字体，我需要通过CSS引用它们。

我的index.html和fonts文件夹位于以下位置。

D:\index.html
D:\fonts

我在CSS文件中有以下代码：

@font-face{font-family:"MyRegular";
src:url('fonts/mycotext_rg.eot');
src:url('fonts/mycotext_rg.eot?#iefix') format('eot'),
    url('fonts/mycotext_rg.woff') format('woff'),
    url('fonts/mycotext_rg.ttf') format('truetype'),
    url('fonts/mycotext_rg.svg') format('svg');
font-weight:"normal"}

如果我应用font-family，则不应用样式。我怎么能参考cutom字体？我的网址是否正常或我是否需要更改？

谢谢！

Answer 1

下面的答案都很好，并向您展示如何引用您的字体（使用font-family中声明的@font-face属性声明的名称，但是当您在本地部署时，您可以还想使用local属性，这应该允许您在引用其他源之前引用系统上已安装的字体。使用Open Sans示例，您可以使用：

src: local('Open Sans Bold'), local('OpenSans-Bold'), url(fonts/opensans-bold.woff) format('woff');

然后只会从您的网址下载字体如果尚未在本地找到该字体。

Answer 2

只需输入font-family值即可。在这种情况下，“ MyRegular ”。

示例：

HTML：

<span class="special-font">Text</span>

CSS：

.special-font { font: 1em "MyRegular", sans-serif; }

如果您不想使用font之类的简写属性，请使用font-family：

.special-font { font-family: "MyRegular", sans-serif; }

您可以添加多种字体，将它们与昏迷分开。

这是一个带有 Droid Sans 字体的DEMO。

关于您是否正确引用字体，如果您在外部CSS文件中，您的相对路径是不好的！您必须在Web服务器目录中上升一级。在你的情况下：

../fonts/Your_Font

您可以使用此语法（是的！即使在Windows操作系统中）。这是一个很好的做法，因为如果您将网页/网站/ Web应用程序更改为具有不同文件系统（如UNIX）的另一个操作系统，您的路径将会服务。

干杯，莱昂纳多

Answer 3

试试这个

当您申请@font face记下示例时，

body{
font-family:'MyRegular';
}

在CSS＆amp;中添加此项您的CSS文件夹中还有eot，svg，woff，ttf字体文件：

@font-face{font-family:"MyRegular";
src:url('fonts/mycotext_rg.eot');
src:url('fonts/mycotext_rg.eot?#iefix') format('eot'),
    url('fonts/mycotext_rg.woff') format('woff'),
    url('fonts/mycotext_rg.ttf') format('truetype'),
    url('fonts/mycotext_rg.svg') format('svg');
font-weight:"normal"}

如果Chrome中的@font-face无效，请使用以下CSS：

       @font-face{font-family:"MyRegular";
        src:url('fonts/mycotext_rg.eot');
        src:url('fonts/mycotext_rg.eot?#iefix') format('eot'),
            url('fonts/mycotext_rg.svg') format('svg'),
            url('fonts/mycotext_rg.woff') format('woff'),
            url('fonts/mycotext_rg.ttf') format('truetype'),
            font-weight:"normal"

}

如何在html中引用自定义字体？

3 个答案: