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

作者: Let us fly
发布时间: 2024-04-30 12:43:51 (4天前)
转自：

15 条回复

0#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 也可以使用WOFF字体 - 例子 <a href="https://encrypted.pcode.nl/blog/wp-content/themes/simplest-pcode/style.css" rel="nofollow"> 这里 </A> </p> <pre> <code> @font-face { font-family: 'Plakat Fraktur'; src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff'); font-weight: bold; font-style: normal; } </code> </pre> </DIV>

编辑
1#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Safari和Internet Explorer都支持CSS @ font-face规则，但它们支持两种不同的嵌入字体类型。 Firefox计划很快支持与Apple相同的类型。 SVG可以嵌入字体，但尚未广泛支持（没有插件）。 </p> <P> 我认为我见过的最便携的解决方案是使用JavaScript函数替换标题等，使用您选择的字体生成并缓存在服务器上的图像 - 这样您只需更新文本而不必在Photoshop中的东西。 </p> </DIV>

编辑
2#
回复此人
陆离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Monotype最近发布了很多字体以及在网页上使用它们的新系统： <a href="http://www.webfonts.fonts.com/" rel="nofollow noreferrer"> http://www.webfonts.fonts.com/ </A> </p> </DIV>

编辑
3#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要做的就是使用@ font-face CSS声明，该声明允许作者指定在线字体以在其网页上显示文本。通过允许作者提供自己的字体，@ font-face无需依赖用户在其计算机上安装的有限数量的字体。 </p> <P> 看看下表： </p> <P> <img src =“https://i.stack.imgur.com/fFhYS.png”alt =“在此输入图像说明”/> </p> <P> 如您所见，主要由于跨浏览器兼容性，您需要了解几种格式。移动设备中的场景没有太大差异。 </p> <H2> 解决方案： </H2> <P> 的<strong> 1 - 完全兼容浏览器 </强> </p> <P> 这是现在可能获得最深层支持的方法： </p> <pre class="lang-css prettyprint-override"> <code> @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } </code> </pre> <P> 的<strong> 2 - 大多数浏览器 </强> </p> <P> 事情是 <a href="http://caniuse.com/#feat=woff" rel="nofollow noreferrer"> 大量转向WOFF </A> 但是，你可以逃脱： </p> <pre> <code> @font-face { font-family: 'MyWebFont'; src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3��5 */ } </code> </pre> <P> 的<strong> 3 - 仅限最新的浏览器 </强> </p> <P> 甚至只是WOFF。 <BR/> 然后你就像这样使用它： </p> <pre> <code> body { font-family: 'MyWebFont', Fallback, sans-serif; } </code> </pre> <H2> 参考文献和进一步阅读： </H2> <P> 这主要是您需要了解的有关实现此功能的内容。如果您想更多地研究这个主题，我将鼓励您查看以下资源。我在这里放的大部分内容都来自以下内容 </p> <UL> <LI> <a href="http://css-tricks.com/snippets/css/using-font-face/" rel="nofollow noreferrer"> 使用Font Face </A> （非常推荐） </LI> <LI> <a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/" rel="nofollow noreferrer"> Bulletproof @ font-face语法 </A> </LI> <LI> <a href="http://caniuse.com/fontface" rel="nofollow noreferrer"> 我可以使用@ font-face网络字体吗？ </A> </LI> <LI> <a href="http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/" rel="nofollow noreferrer"> 如何存档跨浏览器@ font-face支持 </A> </LI> <LI> <a href="http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/" rel="nofollow noreferrer"> 在CSS Mozilla开发者网络上@ font-face </A> </LI> </UL> </DIV>

编辑
4#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> Typeface.js JavaScript方式： </强> </p> <BLOCKQUOTE> <P> 使用typeface.js，您可以嵌入自定义您的网页中的字体，所以你不这样做必须为图像渲染文字 </p> <P> 而不是创建图像或使用 flash只是为了显示您网站的图片您想要的字体中的文字，您可以使用 typeface.js并用纯HTML编写和CSS，就像你的访客一样本地安装的字体。 </p> </BLOCKQUOTE> <P> <a href="http://typeface.neocracy.org/" rel="nofollow noreferrer"> http://typeface.neocracy.org/ </A> </p> </DIV>

编辑
5#
回复此人
荀彧. | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您有自己的字体文件，则需要为其他浏览器添加该字体的更多格式。 </p> <P> 为此，我使用字体生成器 <a href="http://www.fontsquirrel.com/tools/webfont-generator" rel="nofollow"> Fontsquirrel </A> 它提供了所有的字体格式和它的@ font-face CSS，你只需要拖动＆amp;将其放入CSS文件中。 </p> </DIV>

编辑
6#
回复此人
诸葛神侯 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> W3C推荐的技术称为“嵌入”，这里有三篇文章对它进行了详细描述： <a href="http://www.allgraphicdesign.com/downloadfonts/fontsarticles/embeddingfonts/csswebsitespages.html" rel="nofollow noreferrer"> 嵌入字体 </A> 。在我有限的实验中，我发现这个过程容易出错，并且在使其在多浏览器环境中运行方面取得了有限的成功。 </p> </DIV>

编辑
7#
回复此人
土豆 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这可以通过CSS完成： </p> <pre> <code> <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> </code> </pre> <P> 它是 <a href="http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp" rel="noreferrer"> 支持所有常规浏览器 </A> 如果您使用TrueType字体（TTF）或Web开放字体格式（WOFF）。 </p> </DIV>

编辑
8#
回复此人
google你他吗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果使用非标准字体，则表示标准格式的自定义字体，这是我的工作方式，它适用于我迄今为止检查过的所有浏览器： </p> <pre> <code> @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 */ } </code> </pre> <P> 所以你只需要ttf和eot字体。在线提供的一些工具可以进行转换。 </p> <P> 但是如果你想以非标准格式（位图等）附加字体，我无法帮助你。 </p> </DIV>

编辑
9#
回复此人
啊这回彻底死了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 看文章 <EM> <a href="http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/" rel="nofollow noreferrer"> 50个有用的设计工具，用于漂亮的Web排版 </A> </EM> 替代方法。 </p> <P> 我只用过 <a href="http://wiki.github.com/sorccu/cufon/" rel="nofollow noreferrer"> 的Cufón </A> 。我发现它可靠且易于使用，所以我坚持使用它。 </p> </DIV>

编辑
10#
回复此人
Fire ming | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以通过添加一些字体 <a href="http://www.google.com/fonts/" rel="noreferrer"> Google Web字体 </A> 。 </p> <P> 从技术上讲，字体是在Google上托管的，您可以在HTML标题中链接它们。然后，您可以在CSS中自由使用它们 <a href="http://www.w3.org/TR/css3-fonts/#font-face-rule" rel="noreferrer"> <code> @font-face </code> </A> （ <a href="http://www.css3.info/preview/web-fonts-with-font-face/" rel="noreferrer"> 读一读 </A> ）。 </p> <P> 例如： </p> <P> 在里面 <code> <head> </code> 部分： </p> <pre> <code> <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> </code> </pre> <P> 然后在CSS中： </p> <pre> <code> h1 { font-family: 'Droid Sans', arial, serif; } </code> </pre> <HR /> <P> 解决方案似乎非常可靠（甚至 <a href="http://www.smashingmagazine.com/" rel="noreferrer"> Smashing Magazine将其用于文章标题。 </A> ）。但是，到目前为止，还没有那么多字体可供使用 <a href="http://www.google.com/fonts/" rel="noreferrer"> 谷歌字体目录 </A> 。 </p> </DIV>

编辑
11#
回复此人
银角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需提供这样的实际字体链接，你就可以了 </p> <pre> <code> <!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'> <style> body { font-family: 'Montserrat';font-size: 22px; } </style> </head> <body> <h1>Montserrat</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </body> </html> </code> </pre> </DIV>

编辑
12#
回复此人
谦逊的毛巾 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 看起来它只适用于Internet Explorer，但谷歌快速搜索“html嵌入字体”产生 <a href="http://www.spoono.com/html/tutorials/tutorial.php?id=19" rel="nofollow noreferrer"> http://www.spoono.com/html/tutorials/tutorial.php?id=19 </A> </p> <P> 如果你想保持与平台无关（你应该！），你将不得不使用图像，或者只是使用标准字体。 </p> </DIV>

编辑
13#
回复此人
天线宝宝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在这种情况下，我担心图形是你唯一的选择。 </p> </DIV>

编辑

登录后才能参与评论