Technology

The road to reproducing Windows 2000-like jagged fonts in the 2020 web browser


design

The road to reproducing Windows 2000-like jagged fonts in the 2020 web browser

Emoji alsoCSSThe two web engineers who wanted to create a 1990's-style homepage where the correspondence of was not sufficient and the color of the web page was not rich, began to reproduce the font, saying "it could be easily realized" , I ran into a wall of unexpected technology.

Convincing-looking 90s fonts in modern browsers – Vistaserv.net
https://vistaserv.net/blog/90s-fonts-modern-browsers

1990s-style websiteVistaservKatelyn and Paul, who operate as a hobby, initially said, "A black background against a gray backgroundTimes New RomanI think that I could reproduce the 1990s style design by matching the font of. However, when I checked the actually created web page with Google Chrome, the font was displayed more smoothly than expected, as shown below, and it did not have the desired design.

In order to investigate the cause, when I opened the same web page using Internet Explorer 5 on Windows 2000 on the virtual machine, the display was as expected by the two people as follows. In other words, Google Chrome and Internet Explorer 5 used the same font, but the display was completely different.

The reason why the text display looks different is that the outline is expressed smoothly so that the font and image do not look jagged.Anti-aliasingThere was a difference. Anti-aliasing was a technology that did not develop much in the 1990s and was introduced in many OSs in the 2000s.

The font displayed in Google Chrome is processed by anti-aliasing so that the outline looks smooth with not only black but also gray dots.

On the other hand, the font is represented by one color in Internet Explorer 5 of Windows 2000, which gives a more jagged impression than Google Chrome.

The two made a trial and error attempt to reproduce the jagged font of Windows 2000 on all browsers used in 2020. The two came up with the idea of ​​using the bitmap font file that was used in the 1990s as is, but it was found that using the old font file as it was causes an error that CSS did not work properly.

In order to remove the cause of the error, I looked for a tool that can convert to a font file compatible with CSS while leaving the font jagged,FontForgeDiscovered. When I converted the 16-pixel Times New Roman with FontForge, I was able to reproduce almost the same font that was displayed in Internet Explorer 5.

The created font was in raster format and needs to be converted to vector format for actual use in web pages.PotraceWhen I converted the font with such software, Potrace converted the jagged outline to a smooth curve and changed to the following blurry and rounded font.

To solve the problem, I enlarged the bitmap font before the conversion, gave Potrace a high resolution input, and converted Times New Roman of 80 pixels to create Times New Roman which can be used as 16 pixels. Was successful.

The font actually created by Mr. Kaitlin and Mr. Paul is used at the following site operated by two people.

Vistaserv.net
https://vistaserv.net/

Copy the title and URL of this article

Source link

Do you like this article??

Show More

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button