logo标签列表

如何使用Browserify与字体

fontsfont-awesomebrowserifypackage-managers
9
所以，browserify在运行时通过JavaScript处理一切，包括CSS。 但是我如何处理字体，比如npm和browserify中的font-awesome。
有一个npm包在这里：https://www.npmjs.org/package/font-awesome 但是，我如何在不使用grunt或gulp等其他工具的情况下将字体捆绑到我的浏览器中。
//编辑
如果我想在我的html中使用fa类，除了在我的html文件中指向node_modules/font-awesome/css/font-awesome.css之外，还有其他方法吗？
我正在寻找一种自动化的解决方案，因为如果我有几个类似于font-awesome的库，并且它们带有自己的资源（如字体、图像和其他文件），我不想手动指向每个资源文件在我的html文件中。
使用jade，我可以在public中只提供一些文件。而public包含所有通过我的远程依赖项传递的资源，例如字体、图像等。 但是如何自动复制或符号链接特定的node_modules中的所有文件到public？
“bundle”是什么意思？npm install font-awesome会在node_modules目录中安装所有font-awesome相关内容，您可以简单地设置您的应用程序指向./node_modules/fontawesome作为静态目录以从中获取资源。您的问题需要更多细节，例如您用于托管应用/网站/任何内容的工具。此外，为什么需要grunt/gulp会有任何问题呢？您显然已经在使用node和browserify，添加Grunt/Gulp只是一个好的实践。 - Mike 'Pomax' Kamermans
谢谢，我更新了我的问题。 - timaschew
你还使用了其他的东西吗？还是只是一个普通的 .html 文件和通过 npm 安装的 fontawesome？（例如，你是否使用 express？你是否使用 jekyll 等等？） - Mike 'Pomax' Kamermans
@timaschew，你是在说需要以与其他CommonJS模块相同的方式要求字体吗？如果是这样，我很想知道如何做到这一点。我目前不理解的是，如果browserify无法将字体和CSS文件传递到浏览器，那么为什么要使用它呢？为什么不直接使用似乎可以完成所有工作的webpack呢？ - Stewart
是的，我转用了webpack，它真的很棒。 - timaschew
显示剩余2条评论
1个回答
4
我知道一种简便的方法。使用Base64格式的字体。这样，字体数据就在CSS本身中而不是外部文件中。
然后，像平常一样使用Browserify加载你的CSS（用如“insert-css”或“cssy”这样的模块），我使用“Stylus”，当它正在传输CSS定义时，它也会携带字体数据本身。
提前压缩你的Base64代码也是个好主意。或者让Uglify在最后进行压缩。比较结果。
双重检查目标浏览器是否支持Base64字体。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接