{"id":17116,"date":"2012-06-06T11:17:42","date_gmt":"2012-06-06T18:17:42","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17116"},"modified":"2012-06-06T16:44:59","modified_gmt":"2012-06-06T23:44:59","slug":"find-and-wrap-ampersands","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/jquery\/find-and-wrap-ampersands\/","title":{"rendered":"Find and Wrap Ampersands"},"content":{"rendered":"<p>Load <a href=\"http:\/\/benalman.com\/projects\/jquery-replacetext-plugin\/\" rel=\"noopener\">this plugin<\/a>. Then:<\/p>\n<pre rel=\"jQuery\" class=\"lang-js\"><code>$(\"body *\").replaceText( \/&amp;\/gi, '&lt;b class=\"ampersand\"&gt;' + '&amp;' + '&lt;\/b&gt;' );<\/code><\/pre>\n<p>Change the selector as needed. That one is pretty intense.<\/p>\n<p>Now you have a class name you can use to style them specially.<\/p>\n<pre rel=\"CSS\" class=\"lang-css\"><code>.ampersand {\r\n   font-family: Baskerville, Some Other Cool Font, Serif;\r\n   font-style: italic;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Load this plugin. Then: $(&#8220;body *&#8221;).replaceText( \/&amp;\/gi, &#8216;&lt;b class=&#8221;ampersand&#8221;&gt;&#8217; + &#8216;&amp;&#8217; + &#8216;&lt;\/b&gt;&#8217; ); 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; }<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3245,"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":318556,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-synthesis\/","url_meta":{"origin":17116,"position":0},"title":"font-synthesis","date":"August 5, 2020","format":false,"excerpt":"The font-systhesis property in CSS gives the browser instructions for how to handle font bolded and italicized character when the specified font-family doesn't include them. Let's take Lato from Google Fonts as an example. It says there are 10 different variations of the font. Each one of those font variations\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":22040,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-style\/","url_meta":{"origin":17116,"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":192724,"url":"https:\/\/css-tricks.com\/snippets\/sass\/simple-asset-helper-functions\/","url_meta":{"origin":17116,"position":2},"title":"Simple Asset Helper Functions","date":"January 9, 2015","format":false,"excerpt":"Dealing with paths is always a bit annoying, you will concede. Fortunately, it is extremely easy with Sass to have a beautiful API to manage assets and to keep the code simple to maintain. The only thing we need is to store the base asset path in a variable, and\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14053,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/","url_meta":{"origin":17116,"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":3518,"url":"https:\/\/css-tricks.com\/snippets\/css\/font-shorthand\/","url_meta":{"origin":17116,"position":4},"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 &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21993,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-stretch\/","url_meta":{"origin":17116,"position":5},"title":"font-stretch","date":"June 14, 2013","format":false,"excerpt":"The font-stretch property, introduced in CSS3, selects a normal, condensed or expanded face from a font. In order to use font-stretch and see a result of some kind, the font being used has to have a face that matches the value given. In other words, font-stretch will not work on\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17116"}],"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=17116"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17116\/revisions"}],"predecessor-version":[{"id":17118,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17116\/revisions\/17118"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3245"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17116"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}