网页显示 :mad:

The final project in my 1st year web development class is to design and develop a site to teach a skill. This semester, several students are creating sites with musical themes: how to play guitar, read sheet music, etc. That got me thinking: what’s the best way to create musical notation on a modern website?

我一年级网络开发课程的最后一个项目是设计和开发一个教授技能的网站。 这个学期，几个学生正在创建具有音乐主题的网站：如何弹吉他，阅读乐谱等。这让我开始思考：在现代网站上创建音乐符号的最佳方法是什么？

Most digital sheet music is delivered in a format that’s indistinguishable from the bound papers we remember from childhood lessons, only locked into PDFs. To present musical notation in an accessible, usable way on the web, we need to take a different approach.

大多数数字活页乐谱的传送格式与我们从童年课时记得的装订纸没有区别，只有锁定为PDF。 为了以一种可访问的，可用的方式在网络上呈现音乐符号，我们需要采用其他方法。

音乐人物 (Musical Characters)

Most developers don’t realise that there are dozens of musical symbols buried in most typefaces, easily accessible through codes or a glyph. While not enough to reproduce a complex score, these symbols are enough to render basic musical phrases on web pages.

大多数开发人员没有意识到，大多数字体中埋藏着许多音乐符号，可以通过代码或字形轻松访问。 这些符号虽然不足以再现复杂的乐谱，但足以在网页上呈现基本的乐句。

So long as you’re encoding your page in UTF-8, you should be able to simply copy and paste the glyphs directly into your markup:

只要您使用UTF-8编码页面，就应该能够简单地将字形直接复制并粘贴到您的标记中：

<li>♪</li>

You can take the same approach with CSS generated content:

您可以对CSS生成的内容采用相同的方法：

li:before { content: "♯"; }

For the sake of convenience, I’ve also included the decimal and hexadecimal entities for each glyph; these should be used if with JavaScript or in MySQL, as using Unicode characters can cause errors if they are inserted directly into MySQL feilds.

为了方便起见，我还为每个字形包含了十进制和十六进制实体 。 如果在JavaScript或MySQL中应使用这些字符，因为如果将Unicode字符直接插入MySQL字段，则使用它们会导致错误。

音符，乐谱，利器和谱号 (Notes, Flats, Sharps & Clefs)