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

$ pnpm i -D @nuxtjs/google-fonts

在nuxt.config中添加配置

// https://nuxt.com/docs/api/configuration/nuxt-configexport default defineNuxtConfig({devtools: { enabled: true },modules: ['@nuxt/ui','@vueuse/nuxt',['@nuxtjs/google-fonts', {families: {'Noto Sans': true,'Josefin+Sans': true,Lato: [100, 300],Raleway: {wght: [100, 400],ital: [100]},Inter: '200..700','Crimson Pro': {wght: '200..900',ital: '200..700',}}}]],ui: {icons: ['heroicons', 'iconoir']},css: ['~/assets/index.scss',]})

为HTML指定字体

html, body, #__nuxt {height: 100%;font-family: "Noto Sans", SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;}

搞定，提交，合并，收工。

当时的合并请求在这里：

https://github.com/sugarforever/chat-ollama/pull/139

好了，今天的分享就到这里。

项目再小，也是个完整的产品。麻雀虽小，五脏俱全。每天折腾的恐怕并不是核心功能，而是这些看似不起眼，却对用户依然重要的细节。

希望这次的笔记能帮助你在未来谷歌字体支持上节省5分钟的开发时间。