https://stylelint.io/assets/js/66688cb8.01548aa4.js

1"use strict";(self.webpackChunkstylelint_io=self.webpackChunkstylelint_io||[]).push([["7629"],{2230:function(e,s,n){n.r(s),n.d(s,{metadata:function(){return i},default:function(){return h},frontMatter:function(){return l},contentTitle:function(){return o},toc:function(){return c},assets:function(){return t}});var i=JSON.parse('{"id":"user-guide/rules/font-family-name-quotes","title":"font-family-name-quotes","description":"Require or disallow quotes for font family names.","source":"@site/docs/user-guide/rules/font-family-name-quotes.md","sourceDirName":"user-guide/rules","slug":"/user-guide/rules/font-family-name-quotes","permalink":"/user-guide/rules/font-family-name-quotes","draft":false,"unlisted":false,"editUrl":"https://github.com/stylelint/stylelint/edit/main/lib/rules/font-family-name-quotes/README.md","tags":[],"version":"current","frontMatter":{"title":"font-family-name-quotes","sidebar_label":"font-family-name-quotes"},"sidebar":"docs","previous":{"title":"display-notation","permalink":"/user-guide/rules/display-notation"},"next":{"title":"font-family-no-duplicate-names","permalink":"/user-guide/rules/font-family-no-duplicate-names"}}'),a=n(4848),r=n(8453);let l={title:"font-family-name-quotes",sidebar_label:"font-family-name-quotes"},o="font-family-name-quotes",t={},c=[{value:"Options",id:"options",level:2},{value:"<code>&quot;always-unless-keyword&quot;</code>",id:"always-unless-keyword",level:3},{value:"<code>&quot;always-where-required&quot;</code>",id:"always-where-required",level:3},{value:"<code>&quot;always-where-recommended&quot;</code>",id:"always-where-recommended",level:3}];function d(e){let s={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.header,{children:(0,a.jsx)(s.h1,{id:"font-family-name-quotes",children:"font-family-name-quotes"})}),"\n",(0,a.jsx)(s.p,{children:"Require or disallow quotes for font family names."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: \"Times New Roman\", 'Ancient Runes', serif; }\n/**              \u2191               \u2191  \u2191             \u2191\n *               These quotation marks and this one */\n"})}),"\n",(0,a.jsxs)(s.p,{children:["This rule checks the ",(0,a.jsx)(s.code,{children:"font"})," and ",(0,a.jsx)(s.code,{children:"font-family"})," properties."]}),"\n",(0,a.jsxs)(s.p,{children:["This rule ignores ",(0,a.jsx)(s.code,{children:"$sass"}),", ",(0,a.jsx)(s.code,{children:"@less"}),", and ",(0,a.jsx)(s.code,{children:"var(--custom-property)"})," variable syntaxes."]}),"\n",(0,a.jsxs)(s.p,{children:["The ",(0,a.jsxs)(s.a,{href:"/user-guide/options#fix",children:[(0,a.jsx)(s.code,{children:"fix"})," option"]})," can automatically fix most of the problems reported by this rule."]}),"\n",(0,a.jsxs)(s.p,{children:["This rule supports 1 ",(0,a.jsx)(s.a,{href:"/user-guide/configure#message",children:"message argument"}),": the font family name."]}),"\n",(0,a.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.em,{children:"Please read the following to understand these options"}),":"]}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:["The ",(0,a.jsx)(s.code,{children:"font"})," and ",(0,a.jsx)(s.code,{children:"font-family"})," properties accept a short list of special ",(0,a.jsx)(s.strong,{children:"keywords"}),": ",(0,a.jsx)(s.code,{children:"inherit"}),", ",(0,a.jsx)(s.code,{children:"serif"}),", ",(0,a.jsx)(s.code,{children:"sans-serif"}),", ",(0,a.jsx)(s.code,{children:"cursive"}),", ",(0,a.jsx)(s.code,{children:"fantasy"}),", ",(0,a.jsx)(s.code,{children:"system-ui"}),", ",(0,a.jsx)(s.code,{children:"monospace"}),", ",(0,a.jsx)(s.code,{children:"ui-serif"}),", ",(0,a.jsx)(s.code,{children:"ui-sans-serif"}),", ",(0,a.jsx)(s.code,{children:"ui-monospace"}),", ",(0,a.jsx)(s.code,{children:"ui-rounded"}),", ",(0,a.jsx)(s.code,{children:"emoji"}),", ",(0,a.jsx)(s.code,{children:"math"})," and ",(0,a.jsx)(s.code,{children:"fangsong"}),". If you wrap these words in quotes, the browser will not interpret them as keywords, but will instead look for a font by that name (e.g. will look for a ",(0,a.jsx)(s.code,{children:'"sans-serif"'})," font) -- which is almost ",(0,a.jsx)(s.em,{children:"never"})," what you want. Instead, you use these keywords to point to the built-in, generic fallbacks (right?). Therefore, ",(0,a.jsx)(s.em,{children:"all of the options below enforce no quotes around these keywords"}),". (If you actually want to use a font named ",(0,a.jsx)(s.code,{children:'"sans-serif"'}),", turn this rule off.)"]}),"\n",(0,a.jsxs)(s.li,{children:["Quotes are ",(0,a.jsx)(s.strong,{children:"recommended"})," ",(0,a.jsx)(s.a,{href:"https://www.w3.org/TR/CSS2/fonts.html#font-family-prop",children:"in the spec"}),' with "font family names that contain white space, digits, or punctuation characters other than hyphens".']}),"\n",(0,a.jsxs)(s.li,{children:["Quotes are ",(0,a.jsx)(s.strong,{children:"required"})," around font-family names when they are not ",(0,a.jsx)(s.a,{href:"https://www.w3.org/TR/CSS2/syndata.html#value-def-identifier",children:"val

1id CSS identifiers"}),". For example, a font family name requires quotes around it if it contains ",(0,a.jsx)(s.code,{children:"$"}),", ",(0,a.jsx)(s.code,{children:"!"})," or ",(0,a.jsx)(s.code,{children:"/"}),", but does not require quotes just because it contains spaces or a (non-initial) number or underscore. ",(0,a.jsxs)(s.em,{children:["You can probably bet that almost every font family name you use ",(0,a.jsx)(s.strong,{children:"will"})," be a valid CSS identifier"]}),"."]}),"\n",(0,a.jsxs)(s.li,{children:["Quotes should ",(0,a.jsx)(s.strong,{children:"never"})," be used around vendor prefixed system fonts such as ",(0,a.jsx)(s.code,{children:"-apple-system"})," and ",(0,a.jsx)(s.code,{children:"BlinkMacSystemFont"}),"."]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["For more on these subtleties, read ",(0,a.jsx)(s.a,{href:"https://mathiasbynens.be/notes/unquoted-font-family",children:'"Unquoted font family names in CSS"'}),", by Mathias Bynens."]}),"\n",(0,a.jsx)(s.admonition,{type:"warning",children:(0,a.jsxs)(s.p,{children:['This rule does not currently understand escape sequences such as those described by Mathias. If you want to use the font family name "Hawaii 5-0" you will need to wrap it in quotes, instead of escaping it as ',(0,a.jsx)(s.code,{children:"Hawaii \\35 -0"})," or ",(0,a.jsx)(s.code,{children:"Hawaii\\ 5-0"}),"."]})}),"\n",(0,a.jsx)(s.h3,{id:"always-unless-keyword",children:(0,a.jsx)(s.code,{children:'"always-unless-keyword"'})}),"\n",(0,a.jsx)(s.p,{children:"Expect quotes around every font family name that is not a keyword."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-json",children:'{\n  "font-family-name-quotes": "always-unless-keyword"\n}\n'})}),"\n",(0,a.jsx)(s.p,{children:"The following patterns are considered problems:"}),"\n",(0,a.jsxs)("div",{class:"invalid-pattern",children:[(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: Arial, sans-serif; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: Times New Roman, Times, serif; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font: 1em Arial, sans-serif; }\n"})})]}),"\n",(0,a.jsxs)(s.p,{children:["The following patterns are ",(0,a.jsx)(s.em,{children:"not"})," considered problems:"]}),"\n",(0,a.jsxs)("div",{class:"valid-pattern",children:[(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: 'Arial', sans-serif; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:'a { font-family: "Times New Roman", "Times", serif; }\n'})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font: 1em 'Arial', sans-serif; }\n"})})]}),"\n",(0,a.jsx)(s.h3,{id:"always-where-required",children:(0,a.jsx)(s.code,{children:'"always-where-required"'})}),"\n",(0,a.jsxs)(s.p,{children:["Expect quotes only when quotes are ",(0,a.jsx)(s.em,{children:"required"})," according to the criteria above, and disallow quotes in all other cases."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-json",children:'{\n  "font-family-name-quotes": "always-where-required"\n}\n'})}),"\n",(0,a.jsx)(s.p,{children:"The following patterns are considered problems:"}),"\n",(0,a.jsxs)("div",{class:"invalid-pattern",children:[(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:'a { font-family: "Arial", sans-serif; }\n'})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: 'Times New Roman', Times, serif; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:'a { font: 1em "Arial", sans-serif; }\n'})})]}),"\n",(0,a.jsxs)(s.p,{children:["The following patterns are ",(0,a.jsx)(s.em,{children:"not"})," considered problems:"]}),"\n",(0,a.jsxs)("div",{class:"valid-pattern",children:[(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: Arial, sans-serif; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: Times New Roman, Times, serif; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:'a { font-family: "Hawaii 5-0"; }\n'})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font: 1em Arial, sans-serif; }\n"})})]}),"\n",(0,a.jsx)(s.h3,{id:"always-where-recommended",children:(0,a.jsx)(s.code,{children:'"always-where-recommended"'})}),"\n",(0,a.jsxs)(s.p,{children:["Expect quotes only when quotes are ",(0,a.jsx)(s.em,{children:"recommended"})," according to the criteria above, and disallow quotes in all other cases. (This includes all cases where quotes are ",(0,a.jsx)(s.em,{children:"required"}),", as well.)"]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-json",children:'{\n  "font-family-name-quotes": "always-where-recommended"\n}\n'})}),"\n",(0,a.jsx)(s.p,{children:"The following patterns are considered problems:"}),"\n",(0,a.jsxs)("div",{class:"invalid-pattern",children:[(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: Times New Roman, Times, serif; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: MyFontVersion6, sake_case_font; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: 'Arial', sans-serif; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font: 1em Times New Roman, Times, serif; }\n"})})]}),"\n",(0,a.jsxs)(s.p,{children:["The following patterns are ",(0,a.jsx)(s.em,{children:"not"})," considered problems:"]}),"\n",(0,a.jsxs)("div",{class:"valid-pattern",children:[(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: 'Times New Roman', Times, serif; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:'a { font-family: "MyFontVersion6", "sake_case_font"; }\n'})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font-family: Arial, sans-serif; }\n"})}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"a { font: 1em 'Times New Roman', Times, serif; }\n"})})]})]})}function h(e={}){let{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:function(e,s,n){n.d(s,{R:function(){return l},x:function(){return o}});var i=n(6540);let a={},r=i.createContext(a);function l(e){let s=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),i.createElement(r.Provider,{value:s},e.children)}}}]);