外部 CSS 编码问题？

Question

我的外部 CSS 文件直到今天都运行良好。下面的图片是使用 chrome 查看源代码的样子。我必须注意，我在 css 文件的顶部使用字符集 utf-8。 @charset "utf-8";我也试过了Content-Type: text/css; charset=UTF-8

此外，我正在使用 cloudflares 免费 CDN，并且在使用他们的名称服务器时遇到了一些小问题，但我大约一周前开始使用他们的服务并且直到今天才遇到 css 的问题。

有人有想法吗？

编辑：我在我的 htcaccess

中使用了以下内容

    # compress text, html, javascript, css, xml:
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/js
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript

    ## EXPIRES CACHING ##
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 week"
    </IfModule>
    ## EXPIRES CACHING ##

    <IfModule mod_headers.c>
      <FilesMatch "\.(js|css|xml|gz)$">
        Header append Vary Accept-Encoding
      </FilesMatch>
    </IfModule>

    <filesMatch "\.(js|css)$">
    Header set Content-Encoding x-deflate
    # Header set Content-Encoding compress
    # Header set Content-Encoding x-gzip
    </filesMatch>

    <ifModule mod_gzip.c>
      mod_gzip_on Yes
      mod_gzip_dechunk Yes
      mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
      mod_gzip_item_include handler ^cgi-script$
      mod_gzip_item_include mime ^text/.*
      mod_gzip_item_include mime ^application/x-javascript.*
      mod_gzip_item_exclude mime ^image/.*
      mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </ifModule>
    <IfModule mod_expires.c>
    # Enable expirations
    ExpiresActive On 
    # Default directive
    ExpiresDefault "access plus 10 years"
    # My favicon
    ExpiresByType image/x-icon "access plus 10 years"
    # Images
    ExpiresByType image/gif "access plus 10 years"
    ExpiresByType image/png "access plus 10 years"
    ExpiresByType image/jpg "access plus 10 years"
    ExpiresByType image/jpeg "access plus 10 years"
    # CSS
    ExpiresByType text/css "access plus 10 years"
    # Javascript
    ExpiresDefault "access plus 10 years"
    ExpiresByType application/javascript "access plus 1 year"
    </IfModule>

Answer 1

根据上面的评论，尝试以下代码段。

自动 UTF-8 编码

# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8

# Force UTF-8 for a number of file formats
AddCharset utf-8 .atom .css .js .json .rss .vtt .xml

压缩文本文件

<IfModule mod_deflate.c>

    # Force compression for mangled headers.
    # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
    <IfModule mod_setenvif.c>
      <IfModule mod_headers.c>
          SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
          RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
      </IfModule>
    </IfModule>

    # Compress all output labeled with one of the following MIME-types
    # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
    #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
    #  as `AddOutputFilterByType` is still in the core directives).
    <IfModule mod_filter.c>
      AddOutputFilterByType DEFLATE application/atom+xml \
                                    application/javascript \
                                    application/json \
                                    application/rss+xml \
                                    application/vnd.ms-fontobject \
                                    application/x-font-ttf \
                                    application/x-web-app-manifest+json \
                                    application/xhtml+xml \
                                    application/xml \
                                    font/opentype \
                                    image/svg+xml \
                                    image/x-icon \
                                    text/css \
                                    text/html \
                                    text/plain \
                                    text/x-component \
                                    text/xml
    </IfModule>

</IfModule>

设置过期Headers

<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

    # CSS
    ExpiresByType text/css                              "access plus 1 year"

    # Data interchange
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

    # Favicon (cannot be renamed!)
    ExpiresByType image/x-icon                          "access plus 1 week"

    # HTML components (HTCs)
    ExpiresByType text/x-component                      "access plus 1 month"

    # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

    # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"

    # Manifest files
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

    # Media
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

    # Web feeds
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

    # Web fonts
    ExpiresByType application/font-woff2                "access plus 1 month"
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"

</IfModule>

阅读更多： https://github.com/phanan/htaccess

外部 CSS 编码问题？

External CSS Encoding Issue?

html

css

utf-8

cdn

cloudflare