更新

Question

虽然已经阅读了一些关于font-family的文章，但我仍然没有深入了解它是如何工作的。所以我希望这个问题可以帮助我更好地理解font-family的工作原理。

我在网站上看到一些漂亮的字体，其中一个的CSS是font-family:'Futura Today Bold',Arial,sans-serif。我尝试将其复制到我的网站，但它不起作用。看来受此网站影响的元素显示默认字体。这是一个侧面问题：如何检查元素实际使用的字体？我可以用javascript做到吗？

主要问题是，如何在我的网站上使用此'Futura Today Bold'字体？

Answer 1

您打算使用的字体问题是它不会安装在每个用户的设备上，这就是您检查的网站中指定了后备字体（Arial）的原因。

如果您希望使用用户设备上没有的字体，则需要use web fonts。这是一个示例CSS代码：

@font-face {
  font-family: 'Futura Today Bold';
  src: url('http://path/to/futuratodaybold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('http://path/to/futuratodaybold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

在CSS代码中包含上述行后，可以通过样式表中的CSS规则font-family:'Futura Today Bold'应用该字体。

另请注意as Christina pointed out in a comment，您不应使用您没有许可权使用的字体。

回答关于如何找出当前正在应用的字体的其他问题，您可以使用浏览器的开发人员工具来查找。以下是在Firefox中如何完成的屏幕截图。

Fonts in Firefox Developer Tools

Source

Answer 2

基本上，当页面加载以访问它时，您需要在包中实际包含该字体。通过在<head>

中使用此html代码，您可以在获得文件后轻松完成此操作

<link href='font-name' rel='stylesheet' type='text/css' />

或者像这样进入你的css

@import('font-name');

完成此操作后，您所要做的就是像以前一样设置字体

更新

一旦有了ttf，就需要定义字体名称。把它放在CSS中

@font-face {
    font-family: 'Futura Today Bold';
    src: url('font-name.ttf');
}

如果你看这个文件：

http://t.whstonecabinet.com/templates/rt_chimera/css-compiled/demo-dee78feaa65fff084c041f8862da3088.css

然后在开头你可以看到这一行是创建字体的内容，如果你查看fonts/Roboto-Regular-webfont.eot下的文件树，那么你可以找到eot文件：

@font-face {
    font-family:'Roboto';
    src:url('../fonts/Roboto-Regular-webfont.eot');
    src:url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
}

Answer 3

默认情况下，网站中提供了一些字体集。如果要使用任何其他字体，则必须在css中指定相同的字体。通常，字体文件以ttf或otf格式提供。

例如，如果您想使用Futura Today Bold，则应首先从this页面下载字体文件。

接下来，您可以在css中指定要使用的字体路径。访问this链接以了解更多信息

Answer 4

如果您尝试在您的网站中使用某种字体并且它没有显示，则在许多情况下您只是没有可用的字体。所以google并下载它（如果允许的话）。要在您的在线网站中使用它，您必须提供字体，如果您不确定，那么每个人都有这种字体。提供可以通过@font-face完成。但请记住版权。

当浏览器呈现页面时，它使用从左到右的字体。如果最左边的不可用，则向右移动一步，依此类推。您经常会在右侧看到类似sans或sans-serif的内容，并提供后备广告，浏览器只选择该类型的默认字体。

要查看当前使用的字体，您可以右键单击该部分（在Firefox或Chrome中）并检查该元素。查找字体部分。在那里你可以看到使用了哪种字体。如果您看到多种字体，则应该应用最左/最高值。

Answer 5

您需要在项目中实际拥有该字体文件，或者您可以在css中使用@ font-face下载该文件。

有很多服务提供在线下载字体。有些可以免费下载（Google Fonts，其他付费（Typekit）。

这link解释了当今网络上字体的一些含义。

如何从网页复制font-family

5 个答案:

更新