{"id":5605,"date":"2010-02-10T15:40:15","date_gmt":"2010-02-10T22:40:15","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=5605"},"modified":"2010-02-10T15:40:15","modified_gmt":"2010-02-10T22:40:15","slug":"fancy-ampersand","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/fancy-ampersand\/","title":{"rendered":"Fancy Ampersand"},"content":{"rendered":"

Dan Cederholm has long used the Baskerville Italic ampersand, and tells us to Use The Best Ampersand Available<\/a> (also here<\/a>). For better or worse, this has gotten to be ridiculously popular. If you’d like to use this fancy ampersand:<\/p>\n

Script <span class=\"amp\">&amp;<\/span> Style<\/code><\/pre>\n
.amp {\r\nfont-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;\r\nfont-style: italic;\r\nfont-weight: normal;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Dan Cederholm has long used the Baskerville Italic ampersand, and tells us to Use The Best Ampersand Available (also here). For better or worse, this has gotten to be ridiculously popular. If you’d like to use this fancy ampersand: Script <span class=”amp”>&amp;<\/span> Style .amp { font-family: Baskerville, ‘Goudy Old Style’, Palatino, ‘Book Antiqua’, serif; font-style: […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":17116,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/find-and-wrap-ampersands\/","url_meta":{"origin":5605,"position":0},"title":"Find and Wrap Ampersands","date":"June 6, 2012","format":false,"excerpt":"Load this plugin. Then: $(\"body *\").replaceText( \/&\/gi, '' + '&' + '' ); Change the selector as needed. That one is pretty intense. Now you have a class name you can use to style them specially. .ampersand { font-family: Baskerville, Some Other Cool Font, Serif; font-style: italic; }","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22040,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-style\/","url_meta":{"origin":5605,"position":1},"title":"font-style","date":"June 17, 2013","format":false,"excerpt":"The font-style property allows you to make text appear italicized (i.e. sloped, or slanted). em { font-style: italic; } This property accepts one of three possible values: normal, italic, and oblique. If a given font family has an italic or oblique face embedded, the browser will select that face. If\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3518,"url":"https:\/\/css-tricks.com\/snippets\/css\/font-shorthand\/","url_meta":{"origin":5605,"position":2},"title":"Font Shorthand","date":"August 22, 2009","format":false,"excerpt":"Syntax body { font: font-style font-variant font-weight font-size\/line-height font-family; } In Use body { font: italic small-caps normal 13px\/150% Arial, Helvetica, sans-serif; } You need to supply at least font-size and font-family for the shorthand to work, otherwise it'll just be a syntax error and do nothing. body { font:\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14053,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/","url_meta":{"origin":5605,"position":3},"title":"font","date":"September 5, 2011","format":false,"excerpt":"The font property in CSS is a shorthand property that combines all the following sub-properties in a single declaration. body { font: normal small-caps normal 16px\/1.4 Georgia; } \/* is the same as: body { font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; } *\/ There\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14166,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/checked\/","url_meta":{"origin":5605,"position":4},"title":":checked","date":"February 17, 2013","format":false,"excerpt":"The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input () elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not\u2026","rel":"","context":"With 45 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6591,"url":"https:\/\/css-tricks.com\/snippets\/css\/font-stacks\/","url_meta":{"origin":5605,"position":5},"title":"Font Stacks","date":"June 13, 2010","format":false,"excerpt":"\/* Times New Roman-based stack *\/ font-family: Cambria, \"Hoefler Text\", Utopia, \"Liberation Serif\", \"Nimbus Roman No9 L Regular\", Times, \"Times New Roman\", serif; \/* Modern Georgia-based serif stack *\/ font-family: Constantia, \"Lucida Bright\", Lucidabright, \"Lucida Serif\", Lucida, \"DejaVu Serif\", \"Bitstream Vera Serif\", \"Liberation Serif\", Georgia, serif; \/* Traditional Garamond-based serif\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5605"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5605"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5605\/revisions"}],"predecessor-version":[{"id":5606,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5605\/revisions\/5606"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5605"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}