有效的字体系列名称

Question

I've made some research and I found this article , but it doesn't completely help me. I am interested in what are valid characters that can be used for naming font families. Theoretically, can I use every character for naming, just by putting everything in quotation marks? How is with naming in practice?

Example:

@font-face {
        font-family: '&This is my font 1234#!&&&';
        src: url('font.eot');
        src: url('font.eot?#iefix') format('embedded-opentype'),
             url('font.woff') format('woff'),
             url('font.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}

I would also want to know if there are some standards, conventions used for naming font families?

Answer 1

The Mozilla page references the examples from the W3C page .

The only font family names which can be unquoted start with an Alpha [a-zA-Z] and contain ONLY alphanumerics afterwards [A-Za-z0-9] . And possibly also the underscore ( _ ) as well.

As for quoted, it is unspecified. One could assume anything goes, but who has any idea what browsers will actually accept? Best to include tests on supported browsers to ensure continual support and catch breakage quickly in development or user bug reports in new or less used browsers.

But it should never be absolutely necessary to use such characters which may increase the odds of breaking somewhere, now or in the future. Such naming conventions are most definitely a code smell and need reconsideration.

The only restriction on double quoting is that it must quote the entire font family name, ie not "One Two" Three . I've also noticed sporadic breakage if quoting a name that has only Alpha or regex /[a-zA-Z][a-zA-Z0-9_]+/ . "One","Two","Three" , may or may not work, or partly work as expected, or may be fine.

Although only tangentially related, there is something that remains stupidly broken in many browsers: the monospace font. According to this article - and my observation in Mozilla Firefox recent v58 nightly - this still remains the case. The monospace font is shrunk down way too much. The "fix" seems to be a hack where you specify monospace, monospace as the single font family, NO QUOTES. Quoting breaks the behavior and defaults to something like inherit or something different from either inherit or monospace. Quoting either monospace breaks it. Quoting both breaks it.