This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
ideas:image-replacement [2018/11/04 06:40] – Info nhthvhvbh | ideas:image-replacement [2018/11/04 06:49] – created nhthvhvbh | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Image Replacement in CSS3💩💩💩💩💩💩💩💩💩💩💩 ====== | + | [[Playing Minecraft]] |
- | + | ||
- | Image replacement techniques are used on many websites today to replace text, such as a header, with an image of the text rendered in a fancy font. Methods range from image tags to background images with massing negative indentation, | + | |
- | + | ||
- | The CSSWG has resolved to allow the '' | + | |
- | + | ||
- | <code css> | + | |
- | /* Use image, failing that use element' | + | |
- | H1 { content: url(sparkly_heading_text.png), | + | |
- | </ | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | ===== Interaction with Fonts ===== | + | |
- | + | ||
- | We recognize, however, that the likely set of preferences for such headings would be: | + | |
- | + | ||
- | - Use the preferred font if it is installed on the system. | + | |
- | - Otherwise download the font and use it, if possible. | + | |
- | - Otherwise display the image in place of the contents, if possible. | + | |
- | - Otherwise display the contents in an available font. | + | |
- | + | ||
- | The font parts (preferred font, downloaded font, available font) can be done in CSS2 with '' | + | |
- | + | ||
- | At the May 2006 face-to-face meeting, the CSSWG [[http:// | + | |
- | + | ||
- | The consensus on syntax was: | + | |
- | + | ||
- | | + | |
- | require-font | + | |
- | require-font(< | + | |
- | require-font(< | + | |
- | Edge cases to cover: | + | |
- | require-font() | + | |
- | require-font(generic-name) (e.g. require-font(serif)) | + | |
- | + | ||
- | The '' | + | |
- | + | ||
- | The '' | + | |
- | + | ||
- | + | ||
- | ===== Unresolved Details ===== | + | |
- | + | ||
- | One proposal for '' | + | |
- | + | ||
- | It was assumed that '' | + | |
- | + | ||
- | The spec should perhaps specify that '' | + | |
- | + | ||
- | Would require-font(Arial, | + | |
- | + | ||
- | ===== Examples ===== | + | |
- | + | ||
- | A basic example from Ian, demonstrating a range of fallback possibilities. | + | |
- | + | ||
- | <code html> | + | |
- | < | + | |
- | </ | + | |
- | + | ||
- | ...with one of: | + | |
- | + | ||
- | <code css> | + | |
- | h1 { content: " | + | |
- | h1 { content: url(images/ | + | |
- | h1 { content: url(images/ | + | |
- | h1 { font-family: | + | |
- | | + | |
- | h1 { font-family: | + | |
- | | + | |
- | h1 { font-family: | + | |
- | | + | |
- | h1 { font-family: | + | |
- | | + | |
- | h1 { font-family: | + | |
- | | + | |
- | </ | + | |
- | + | ||
- | Another example from Bert, demonstrating the advantage of separating the method of specifying a font ('' | + | |
- | + | ||
- | <code html> | + | |
- | < | + | |
- | </ | + | |
- | <code css> | + | |
- | h1 span { font-family: | + | |
- | h1 { font-family: | + | |
- | h1 { content: require-font(biggy) contents, url(replacement.png) } | + | |
- | </ | + | |
- | + | ||
- | The '' | + | |
- | + | ||
- | <code css> | + | |
- | h1 { content: require-font(biggy), | + | |
- | </ | + | |
- | + | ||
- | + | ||
- | ===== Expected Spec ===== | + | |
- | + | ||
- | Since the Generated Content module is not expected to advance at all for quite some time, this syntax is likely to be incorporated into the Fonts module. | + |