CSS 如何从网站窃取字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22143365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to steal a font from a site
提问by office-ask
I know the question itself is illegal - asking to steal someone's home. :)
我知道这个问题本身是非法的——要求偷别人的家。:)
Anyways, it's a situation when a developer's logic is not working actually. With Browser's Developer Tool, I got the site's CSS. I located the @font-facecode inside the main.css.
无论如何，这是开发人员的逻辑实际上不起作用的情况。使用浏览器的开发者工具，我得到了网站的 CSS。我@font-face在main.css.
Here's what I got:
这是我得到的：
main.css:
path: http://www.example.com/assets/css/main.css
code:
main.css：
路径：http: //www.example.com/assets/css/main.css
代码：
@font-face {
font-family: 'the_font';
src: url("../fonts/fontname/fontname.eot");
bla bla
font-style: normal;
font-weight: normal;
}
So, according to the code the font file is in a folder named "fontname" under the "fonts" folder. And from the path's direction we can guess that the font's location is:
因此，根据代码，字体文件位于“fonts”文件夹下名为“fontname”的文件夹中。从路径的方向我们可以猜测字体的位置是：
http://www.example.com/assets/fonts/fontname/fontname.eot
http://www.example.com/assets/fonts/fontname/fontname.eot
But it's generating a 404 page.
但它正在生成一个 404 页面。
Why NOT the path's logic is working?
为什么路径的逻辑不起作用？
回答by Denys Séguret
Supposing the CSS file isn't bad (i.e. the font really is loaded). You may use the developper tools of your browser.
假设 CSS 文件还不错（即确实加载了字体）。您可以使用浏览器的开发工具。
For example in Chrome : hit F12to open the developer toolsand then select the Networkor Resourcestab and reload the page. You'll see the font file listed.
例如在 Chrome 中：点击F12打开开发人员工具，然后选择网络或资源选项卡并重新加载页面。您将看到列出的字体文件。
回答by AIon
I use multiple tools for extracting Css, depending on the website.
我使用多种工具来提取 Css，具体取决于网站。
Specifically for fonts, this tool works amazing: FontfaceNinja- comes with 3 browser extensions to pick from.
这个工具特别适用于字体，效果惊人：FontfaceNinja- 带有 3 个浏览器扩展可供选择。
But sometimes is not enough:
CssViewer is another option, nice design, easy to use, it extracts only the Css for the element hovered - almost the sameas Chrome Developer Tools, But much more readable in my opinion. It's a Chrome extension only. Install it from here: CssViewer
但有时还不够：CssViewer 是另一种选择，漂亮的设计，易于使用，它仅提取悬停元素的 Css -几乎与Chrome 开发者工具相同，但在我看来更具可读性。它只是一个 Chrome 扩展程序。从这里安装它：CssViewer
The tool i use the most for this job is CSSSteal, it gives the same level of details as chrome developer tools, cascading of styles from parent to it's child - all that, but because you can easy copy and paste the Css, is much easier to use for this purpose then the default Developer Tools. Good tool for complex Css migrations.. when the fonts and other css properties override each other like crazy.. get it form here: CssSteal
Note: After installation of CssSteal, restart the browser - then make sure you open the Tab that contains the Styles (on the right) - not the Elements one - as you can see above.
Hope that helps :)
我在这项工作中使用最多的工具是CSSSteal，它提供与 chrome 开发人员工具相同级别的细节，从父级到子级的样式级联 - 所有这些，但是因为您可以轻松复制和粘贴 Css，所以要容易得多要用于此目的，则使用默认的开发人员工具。复杂的 Css 迁移的好工具.. 当字体和其他 css 属性像疯了一样相互覆盖时.. 从这里获取它：CssSteal注意：安装 CssSteal 后，重新启动浏览器 - 然后确保打开包含样式的选项卡（在右侧） - 不是 Elements 一 - 正如您在上面看到的那样。希望有帮助:)
