ChatOllama是我2024年开始创建的一款基于LLM的聊天机器人Web应用。项目开源于GitHub:
https://github.com/sugarforever/chat-ollama
【ChatOllama开源笔记】是我基于开源项目的发展整理的笔记，算是点点滴滴的分享，涵盖了技术类，非技术类话题。希望能给大家分享一些有价值的内容，并与大家产生一些共鸣，欢迎大家关注。
02 柴米油盐 - Nuxt 3与谷歌字体
麻雀虽小，五脏俱全。虽是一个小巧的基于AI的Web应用，但必要的元素，ChatOllama一个都不能少。
今天我们聊聊字体，聊聊Nuxt 3集成谷歌字体。
ChatOllama是个基于Nuxt 3框架的Web应用。
Nuxt.js是一个建立在Vue.js之上的应用程序框架，旨在构建快速、可扩展和易于维护的大型应用。Nuxt 3是Nuxt.js的最新版本，基于Vue 3和Vite构建，充分利用Vue 3的功能和Vite的高性能特点。
在 ChatOllama 开发的最初两周，我完成了基本功能的搭建，包括 Ollama 模型管理，知识库创建，系统设置。但前端的诸多元素还处于“初始状态”，字体便是其一。
在用户的使用中，开源爱好者们开始提供灵感。细心的玩家，往往会带来令人惊喜的细节提升。
satrong (https://github.com/satrong)现在是活跃开发者，为 ChatOllama 带来不少前端的更新，非常感谢他。
satrong 在使用中发现字体的改进空间，将项目的首选字体设置为了谷歌字体 Noto Sans。
在使用中，我发现本地环境没有相关字体文件，因此页面上font family的设置并未生效。在过去的开发中，我并未对字体的设置有过任何实践，这正是学习的机会。
随着一番搜索和测试，问题解决，先分享如下。
Nuxt生态中对谷歌字体已有完善的支持。
https://google-fonts.nuxtjs.org/
我要做的就是安装并配置。
安装google-fonts
$pnpmi-D@nuxtjs/google-fonts
在nuxt.config中添加配置
//https://nuxt.com/docs/api/configuration/nuxt-configexportdefaultdefineNuxtConfig({devtools:{enabled:true},modules:['@nuxt/ui','@vueuse/nuxt',['@nuxtjs/google-fonts',{families:{'NotoSans':true,'Josefin+Sans':true,Lato:[100,300],Raleway:{wght:[100,400],ital:[100]},Inter:'200..700','CrimsonPro':{wght:'200..900',ital:'200..700',}}}]],ui:{icons:['heroicons','iconoir']},css:['~/assets/index.scss',]})为HTML指定字体
html,body,#__nuxt{height:100%;font-family:"NotoSans",SFProSC,SFProText,SFProIcons,PingFangSC,HelveticaNeue,Helvetica,Arial,sans-serif;}搞定，提交，合并，收工。
当时的合并请求在这里：
https://github.com/sugarforever/chat-ollama/pull/139
好了，今天的分享就到这里。
项目再小，也是个完整的产品。麻雀虽小，五脏俱全。每天折腾的恐怕并不是核心功能，而是这些看似不起眼，却对用户依然重要的细节。
希望这次的笔记能帮助你在未来谷歌字体支持上节省5分钟的开发时间。
| 欢迎光临 链载Ai (https://www.lianzai.com/) | Powered by Discuz! X3.5 |