如何修复 Android Chrome/Firefox 中等宽宽度不正确的问题?
How do I fix monospace spaces not being correct width in Android Chrome/Firefox?
我正在玩一个显示 ASCII/ANSI 艺术标志的网站,一切似乎都在桌面浏览器中运行良好。
然后我想看看它是否适用于移动设备,但这里的空格宽度似乎不正确。
显示 ASCII-art 的网站部分包裹在具有以下 CSS 属性的 <div>
中:
line-height:1em;
color: #ff791a;
white-space: pre !important;
font-size: 0.7vw;
margin: 20% 50% 0 0;
font-family: 'Druid San Mono',courier, monospace, monospace;
width: 100%;
height: 100px;
我尝试了几种字体变体,例如“Druid Sans Mono”、等宽字体(也是等宽字体、等宽字体 hack)、“Courier”和“Roboto Mono”,但其中 none 有效。
我还尝试使用 nbsp
而不是仅使用空格。
改变字母间距似乎也没有达到我想要的效果。
有什么技巧可以让它工作吗?
你可以在这里看到这个网站disconnected.tech
原来 some gliphs are missing 的 Google 字体。
Adobe 的解决方法 Source Code Pro, which has all characters (including box drawing, which is what I needed). Mononoki 也应该有效。
我直接从 Adobe 添加,而不是通过 Google 字体:https://adobe-fonts.github.io/source-code-pro/source-code-pro.css
可能会告诉 Google 字体在其简化的 Source Code Pro(文本=参数)中包含所有必要的字符。
我正在玩一个显示 ASCII/ANSI 艺术标志的网站,一切似乎都在桌面浏览器中运行良好。
然后我想看看它是否适用于移动设备,但这里的空格宽度似乎不正确。
显示 ASCII-art 的网站部分包裹在具有以下 CSS 属性的 <div>
中:
line-height:1em;
color: #ff791a;
white-space: pre !important;
font-size: 0.7vw;
margin: 20% 50% 0 0;
font-family: 'Druid San Mono',courier, monospace, monospace;
width: 100%;
height: 100px;
我尝试了几种字体变体,例如“Druid Sans Mono”、等宽字体(也是等宽字体、等宽字体 hack)、“Courier”和“Roboto Mono”,但其中 none 有效。
我还尝试使用 nbsp
而不是仅使用空格。
改变字母间距似乎也没有达到我想要的效果。
有什么技巧可以让它工作吗?
你可以在这里看到这个网站disconnected.tech
原来 some gliphs are missing 的 Google 字体。
Adobe 的解决方法 Source Code Pro, which has all characters (including box drawing, which is what I needed). Mononoki 也应该有效。
我直接从 Adobe 添加,而不是通过 Google 字体:https://adobe-fonts.github.io/source-code-pro/source-code-pro.css
可能会告诉 Google 字体在其简化的 Source Code Pro(文本=参数)中包含所有必要的字符。