尽管阅读了一些关于font-family的文章，但我仍然没有深入了解它的工作原理。所以我希望这个问题可以帮助我更好地理解font-family的工作原理。如何从网页复制字体家族

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

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

2014-11-01 shenkwen

https://typekit.com/fonts/futura- - 你不能在网页上使用你的桌面字体，除非你有使用该字体的许可证，或者它是一个开源字体等。 – Christina 2014-11-01 14:39:01

你在哪里可以找到这种字体？什么网站 – Hive7 2014-11-01 14:45:27

usatoday.com侧栏标题“最流行“ – shenkwen 2014-11-01 14:57:46

您打算使用的字体的问题是，它不会安装在每个用户的设备上，这就是为什么在您检查的网站中指定了回退字体（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。

来源

2014-11-01 14:51:15

我也尝试使用开发人员工具来查明实际正在使用的字体。但是我发现，如果我将font-family设置为“无意义”之类的字体，计算样式中的字体系列也将显示“无意义”，这没有意义。 – shenkwen 2014-11-01 14:55:23

嗯？这不是我在结尾看到的行为。上面的屏幕截图很旧，适用于较旧版本的Chrome。如果您使用的是Chrome，请打开devtools，转到“Elements”选项卡，然后选择网页上的任何元素。然后在右窗格中，进入名为'Computed'的选项卡并滚动到底部。在那里，你应该看到渲染的字体。在这个屏幕截图中注意：http：//i.imgur.com/LjMhjDz.jpg我只是把这个'无意义'的字体样式应用到跨度，但是在右边的窗格底部，它仍然显示'Times New Roman'。 – 2014-11-01 15:01:52

好吧，我错过了“渲染字体”部分，感谢您的这个信息，它真的有帮助。但请看这张图片：[http://t.whstonecabinet.com/font.png]（http://t.whstonecabinet.com/font.png）在渲染的字体部分，它显示了一些奇怪的东西，你可以在这里看到实时网站：[http://t.whstonecabinet.com]（http://t.whstonecabinet.com） – shenkwen 2014-11-01 15:13:29

基本上，当页面加载到访问它时，您需要实际包含在字符串中的字体。您可以轻松地做到这一点，一旦你使用这个网站的代码在你的<head>

<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'); 
}

来源

2014-11-01 14:43:54 Hive7

所以如果我看到一个使用非常规字体的页面，我应该能够从它的HTML中获取字体文件的URL？实际上，我正在查看我自己的joomla powered网站，该模板使用了一种名为' 'roboto'，我可以看到这些ttf文件es下的'fonts'文件夹，但我没有看到'roboto'字体正在加载'' – shenkwen 2014-11-01 14:51:38

对不起，如果你得到ttf文件有点不对，然后按照我在上面说的更新 – Hive7 2014-11-01 14:53:10

没有我I我试图了解它是如何工作的。我的页面正在工作，字体'roboto'正确显示，但这是一种非常规字体，但我没有看到以您提到的方式加载该字体。那么为什么这个'roboto'字体可以显示在我的页面上呢？ – shenkwen 2014-11-01 15:00:25

有一些字体集的是在网站默认选项。如果你想使用任何其他字体，那么你必须在你的CSS中指定相同的。通常字体文件有ttf或者otf格式。

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

接下来，您可以在您的css中指定您打算使用的字体路径。访问this要知道更多的链接

来源

2014-11-01 14:44:44

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

当浏览器呈现页面时，它会使用从左到右的字体。如果最左侧不可用，则向右一步等等。您经常会在右侧看到类似sans或sans-serif的东西，并且为了提供回退，浏览器只需选择该类型的默认字体。

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

来源

2014-11-01 14:46:02 Felix

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

有相当多的服务提供在线下载字体。有些是免费下载（Google Fonts，他人支付（Typekit）。

这link介绍了一点是多么今天在网络上的字体。

来源

2014-11-01 14:51:57 carlosHT

如何从网页复制字体家族

回答

更新

相关问题