Why Specify @Charset "Utf-8"; in Your CSS File

Why specify @charset UTF-8 ; in your CSS file?

It tells the browser to read the css file as UTF-8. This is handy if your CSS contains unicode characters and not only ASCII.

Using it in the meta tag is fine, but only for pages that include that meta tag.

Read about the rules for character set resolution of CSS files at the w3c spec for CSS 2.

is charset=utf-8 need it in js and css files even if my html has meta charset= UTF-8

You don't need and should not declare charset for JavaScript files if it has the same encoding declared in your HTML file. Same goes for CSS files, as you can see on W3C page. JSON shall even be encoded in UTF-8/UTF-16/UTF-32 and its default is UTF-8 as IETF states . So you should not add a charset attribute to that.

Also some MIME type should not have charset parameters at all. JSON is one of them.
So you see it can vary which MIME type can have a charset parameters and which don't even have that parameter at all.

As stated above, it mostly is enough to have your CSS/JavaScript etc. files the same encoding as HTML as it it mostly UTF-8. Additionally your Server itself should define and tell the browser what charset is used.

Special characters not show correctly (CSS file, UTF-8)

The notation \f071 denotes U+F071, which is a Private Use codepoint. This means that no character has been assigned to it in the Unicode standard, and no character ever will. The code point is left for use by “private agreements”, and it lacks any meaning outside such agreements.

Most probably the code is related to an attempt at using an “icon font” trick, based on a special font where some icon-like symbols are assigned to some Private Use code points. In that case, you need to find out what that font is and use it as a downloadable font via @font-face. Alternatively, use images instead of “icon fonts”.

This does not depend on character encoding.

Content for '★' in CSS appears as 'â˜…'

Probably the text encodings (character sets) for your CSS and HTML files do not agree.

To set a stylesheet's encoding, use @charset; for example:

@charset "UTF-8";

To set an HTML page's encoding, use a <meta> tag (in the <head> section at the top); for example:

<meta http-equiv="Content-type" content="text/html;charset=utf-8">

or in HTML 5:

<meta charset="UTF-8">

The @charset of a stylesheet must agree with the encoding chosen for its HTML page.

UTF-8 Character in CSS

U+E824 and ..25 are code points in the private use area. Code points in that area are not reserved, they do not have any pre-defined meaning. They are neither defined as Chinese characters nor arrows. You are free to use any private use code point for any purpose you wish, as long as the publisher and the client are in agreement what these code points mean.

In the browser this pretty much just boils down to having the right fonts installed/loaded/defined. In a web page, each character is simply rendered by the first defined/responsible font which happens to contain a glyph for that code point. The reason why it renders differently on two different systems/environments therefore can only stem from the fact that the CSS font definitions differ, or that the browser has different fonts installed.

Most likely the original included a custom web font which defined these characters as arrows. You have either omitted that font, or you have overridden the font precedence and made a different font apply to that element, and that font happens to define Chinese characters at those code points.

Using @charset UTF-8 returns an error

Update:

This seems to be a big, they say to fix it in the next version:

More Info:
https://less.tenderapp.com/discussions/problems/8-charset-error

Thanks for posting, this is fixed in
the upcoming 2.0 version, which should
be released sometime this month. It is
indeed due to @charset not being
parsed as a directive.

That comment by the LESS team was published on:

May 05, 2010 @ 05:50 AM

So it should be fixed in recent version. Make sure that you are using the latest version of it.

Specifying a charset for stylesheets

Found that citation that I needed:

http://www.w3.org/TR/CSS2/syndata.html#charset

When a style sheet resides in a separate file, user agents must
observe the following priorities when determining a style sheet's
character encoding (from highest priority to lowest):

An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)

BOM and/or @charset (see below)

or other metadata from the linking mechanism (if any)

charset of referring style sheet or document (if any)

Assume UTF-8

So, although @charset "UTF-8"; is relevant, HTTP headers override it. You can specify the charset in a meta tag of your HTML document with <meta charset="utf-8">, which will satisfy #4, and user agents are supposed to fall back to UTF-8 anyways.

With some of these "glyphs", it's important that the end user has at least one font installed that supports it, so keep that in mind while writing your CSS. Not all fonts support all unicode characters.

Why ✓ symbol sometimes gets replaced with âœ“ one?

Try with the entity: content: "\2713";

Why Specify @Charset "Utf-8"; in Your CSS File