Question

<html>

<head>
<title> </title>

<body>
    <font face="file:///E:/softwares/FONTS/alpha kufi regular.ttf" size="+2"> This is a tester for a font, that may not be installed on the machine </font>
</body>

</head>

</html>

此代码段未显示预期字体中的句子。这可能是什么原因？

注意：我知道HTML 5不支持字体标记，HTML 4不推荐使用。

Answer 1

这里有两个基本问题：HTML face属性（以及它的CSS对应物，font-family属性）需要字体系列 name 作为值，而不是字体文件的URL，file: URL本质上与系统有关，在许多情况下可能无法正常工作。

以下工作，前提是字体文件alpha_kufi_regular.ttf（更好地避免字体名称中的空格，因为URL中不允许这样的空格）放在您拥有的直接文件的fonts子目录中CSS文件和浏览器支持TrueType字体作为“web字体”（这不一定是“web字体”用法，但可以是本地的;技术是相同的）：

<style>
@font-face {
    font-family: AlphaKufi;
    src: url('fonts/alpha_kufi_regular.ttf');
}
    </style>
<font face="AlphaKufi" size="+2"> This is a tester for a font, 
that may not be installed on the machine </font>

由于并非所有浏览器都支持将TrueType字体作为“网络字体”，因此如果您打算在网页上使用该字体，请考虑使用FontSquirrel @font-face generato r。

通常最好使用CSS而不是HTML来进行字体设置，但这是一个不同的问题。从理论上讲，“网络字体”也不需要使用HTML <font face="...">（没有规范要求），但在实践中它们确实如此。

Answer 2

我找不到它的参考，但我最好的猜测是你无法使用file://协议（本地文件系统）访问字体。如果页面在线或通过本地服务器（http：// localhost或等效的）访问，则确实如此。

此外，根本没有理由使用<font>。它可能不会因为浏览器不再完全支持它而起作用。

编辑：事实上，我不确定<font>是否支持使用字体文件而不是字体名称。

提供字体文件的解决方案是使用CSS的@font-face。

Answer 3

这是因为font的{{1}}属性没有获取字体文件的路径。它采用逗号分隔的字体名称列表。浏览器在系统中搜索已安装的字体，并从那里加载相关的字体（如果存在）。

如果您想指定自己的，可能需要使用CSS @font-face。

Answer 4

使用Google Web Fonts API向您的网页添加网络字体：

<html>

<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=alpha kufi regular">
<style>
  body {
    font-family: 'alpha kufi regular';
    font-size: 48px;
  }
</style>
<title> </title>

<body>
    <div>This is a tester for a font, that may not be installed on the machine</div>
</body>

</head>

</html>

〜Reference

我没有看到预期字体中的句子

4 个答案: