如何在网站上添加一些非标准字体?

HTML CSS

十三米亚阳光

2020-03-18

有没有一种方法可以在网站上添加一些自定义字体而不使用图像,Flash或其他图形?

例如,当我在一个婚礼网站上工作时,发现该主题有很多不错的字体。但是我找不到在服务器上添加该字体的正确方法。以及如何将CSS中的字体包含在HTML中?没有图形就可以做到吗?

第1989篇《如何在网站上添加一些非标准字体?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

14个回答
MandyEva 2020.03.18

有关替代方法,请参见文章50个有用的漂亮Web版式设计工具

我只用过Cufon我发现它可靠且非常易于使用,因此我坚持使用它。

西门卡卡西 2020.03.18

如果您有一个字体文件,则需要为其他浏览器添加该字体的更多格式。

为此,我使用诸如Fontsquirrel类的字体生成器,它提供了所有字体格式及其@ font-face CSS,您只需要将其拖放到CSS文件中即可。

Tony老丝 2020.03.18

看起来它只能在Internet Explorer中使用,但是Google快速搜索“ html embed fonts”会产生http://www.spoono.com/html/tutorials/tutorial.php?id=19

如果要保持平台无关性(并且应该!),则必须使用图像,否则仅使用标准字体。

凯凯Jim 2020.03.18

Typeface.js JavaScript方式:

使用typeface.js,您可以在网页中嵌入自定义字体,从而不必将文本呈现为图像

您可以使用typeface.js并以纯HTML和CSS编写内容,就像访问者已在本地安装字体一样,而不必创建图像或仅使用Flash来以所需字体显示网站的图形文本。

http://typeface.neocracy.org/

LEY神无 2020.03.18

我做了一些研究,并研究了“ 动态文本替换”(2004-06-15发布)。

该技术使用图像,但似乎是“免提”的。您编写文本,然后让一些自动化脚本在页面上为您即时进行自动查找和替换。

它有一些局限性,但它可能是我所见过的所有其他选择中较容易的选择之一(并且与浏览器更兼容)。

SamTomEva 2020.03.18

Safari和Internet Explorer都支持CSS @ font-face规则,但是它们支持两种不同的嵌入式字体类型。Firefox计划不久后支持与Apple相同的类型。SVG可以嵌入字体,但尚不被广泛支持(没有插件)。

我认为我见过的最便携的解决方案是使用JavaScript函数用您选择的字体将标题等替换为在服务器上生成并缓存的图像-这样,您只需更新文本即可,而不必在Photoshop中的东西。

SamMandy 2020.03.18

如果使用ASP.NET,生成基于图像的字体非常简单,而无需实际使用以下方法在服务器上安装(如添加到已安装的字体库中)字体:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

然后以该字体绘制到上Graphics

达蒙番长 2020.03.18

W3C为此推荐的技术称为“嵌入”,并且在这里的三篇文章中都有很好的描述:嵌入字体在有限的实验中,我发现此过程容易出错,并且使其在多浏览器环境中运行的成功有限。

理查德古一 2020.03.18

文章字体面在IE中:使Web字体工作说,它适用于所有三种主要的浏览器。

这是我正在工作的示例:http : //brendanjerwin.com/test_font.html

有关嵌入字体的更多讨论

Stafan小宇宙 2020.03.18

Typeface.jsCufon是另外两个有趣的选项。它们是JavaScript组件,它们通过除Internet Explorer以外的所有更新浏览器中的新<canvas>元素以及Internet Explorer中的VML以JSON格式(可以在其网站上TrueTypeOpenType格式转换为特殊字体数据)呈现特殊字体数据

两者的主要问题(到现在为止)是选择文本不起作用,或者至少只能非常笨拙地起作用。

尽管如此,对于头条新闻还是很好的。正文...我不知道。

而且速度惊人。

古一凯Gil 2020.03.18

或者,您可以尝试sIFR我知道它使用Flash,但前提是可用。如果没有Flash,它将以其原始(CSS)字体显示原始文本。

小小LEY伽罗 2020.03.18

我发现在网站上使用非标准字体的最简单方法是使用sIFR

它确实涉及使用包含字体的Flash对象,但是如果未安装Flash,它将很好地降级为标准文本/字体。

样式是在CSS中设置的,JavaScript会为您的文本设置Flash替换。

编辑:(我仍然建议将图像用于非标准字体,因为sIFR会增加项目时间,并且可能需要维护)。

村村小卤蛋 2020.03.18

如果使用非标准字体,则表示标准格式的自定义字体,这是我的操作方法,它适用于到目前为止我检查过的所有浏览器:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

因此,您只需要ttf和eot字体。某些在线可用的工具可以进行转换。

但是,如果您想附加非标准格式的字体(位图等),我无济于事。

小小十三泡芙 2020.03.18

这可以通过CSS完成:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

It is supported for all of the regular browsers if you use TrueType-Fonts (TTF) or the Web Open Font Format (WOFF).

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android