Archiwa kategorii: CSS

Niestandardowa czcionka na stronie zamiast font replacement? Generator fontów

 

http://www.fontsquirrel.com/fontface/generator

genialne narzędzie do konwertowania dowolnego zestawu czcionek

jakich formatów potrzebujemy? W tej chwili kilku. Internet Explorer toleruje tylko swój Embedded OpenType, któryMicrosoft próbuje przeforsować od dawna, ale który nigdy nie zyskał popularności. Pozostałe przeglądarki chętnie przyjmą.ttf. I w zasadzie tyle by wystarczyło. Jednak jeśli chcemy żeby wybrane czcionki wyświetlały się również na iPhonemusimy rozważyć pewną kwestię. Starsza wersja oprogramowania obsługuje tylko fonty w formacie .svg. Generator oczywiście zaproponuje nam i ten format, jednak radziłbym go nie używać. Najnowsza wersja oprogramowania dla iPhone wspiera już standardowe .ttf

 

źródło http://blog.secondgate.pl/2011/01/23/kompletna-instrukcja-uzywania-font-face/

Spis poleceń CSS

http://www.signs.pl/html/index.php

Atrybuty: http://kursy.skryptoteka.pl/kurs,3,css.html/2

 

łączenie selektorów: http://www.w3.org/TR/CSS2/selector.html

• abbr – atrybut definiuje skrótowy opis zawartości komórki w tabeli 
• accept-charset  atrybut definiuje akceptowany język 
• accept – atrybut definiuje akceptowany zestaw znaków 
• accesskey – atrybut definiuje klawisz skrótu 
• action – atrybut definiuje adres strony przetwarzającej dane z formularza 
• 
align – atrybut definiuje wyrównanie względem innych elementów 
• 
alink – atrybut definiuje kolor naciskanych odnośników 
• alt – atrybut definiuje tekst alternatywny gdy element nie może być wyświetlony 
• archive – atrybut definiuje nazwę pliku, który zawiera klasy appletu 
• axis – atrybut definiuje nazwę pokrewnej grupy komórek 
• 
background – atrybut definiuje adres graficznego tła strony WWW 
• 
bgcolor – atrybut definiuje kolor tła 
• border – atrybut definiuje szerokość ramki 
• cellpadding – atrybut definiuje odległość akapitu od krawędzi komórki 
• cellspacing – atrybut definiuje szerokośc krawędzi komórek 
• char – atrybut definiuje znak, względem którego nastąpi wyrównanie 
• charoff – atrybut definiuje pozycję znaku wyrównania 
• charset – atrybut definiuje język w jakim zakodowano dokument 
• checked – atrybut definiuje element formularza jako wybrany 
• cite – atrybut definiuje adres źródła informacji 
• class – atrybut definiuje klasę CSS dla elementu 
• classid – atrybut definiuje informacje o klasie obiektu 
• 
clear – atrybut definiuje położenie nowej linii za grafiką 
• 
code – atrybut definiuje nazwę appletu w Javie dla elementu APPLET 
• codebase – atrybut definiuje adres bazowy dla atrybutu code 
• codetype – atrybut definiuje typ obiektu 
• 
color – atrybut definiuje kolor czcionki 
• cols – atrybut definiuje liczbę kolumn lub szerokość elementu 
• colspan – atrybut definiuje ilość połączonych kolumn 
• 
compact – atrybut definiuje listę bardziej zwartą 
• content – atrybut definiuje wartość atrybutu „name” 
• coords – atrybut definiuje współrzędne regionu w mapie odsyłaczy 
• data – atrybut definiuje plik z danymi obiektu 
• datetime – atrybut definiuje datę zmian 
• declare – atrybut definiuje deklarację obiektu 
• defer – atrybut definiuje opóźnienie wykonywania skryptu 
• dir – atrybut definiuje kierunek wyświetlania tekstu lub położenie elementu 
• disabled – atrybut definiuje brak możliwości korzystania z elementu 
• enctype – atrybut definiuje sposób kodowania danych 
• 
face – atrybut definiuje rodzaj czcionki 
• frame – atrybut definiuje typ obramowania tabeli 
• frameborder – atrybut definiuje obramowanie ramki 
• headers – atrybut definiuje listę nazw nagłówków komórek 
• 
height – atrybut definiuje wysokość elementu 
• href – atrybut definiuje adres strony lub miejsca 
• hreflang – atrybut definiuje język docelowej strony WWW 
• 
hspace – atrybut definiuje odstępy poziome dookoła elementu 
• http-equiv – atrybut definiuje wartość dla nagłówka strony 
• id – atrybut definiuje unikalny identyfikator 
• ismap – atrybut definiuje współrzędne dodawane do adresu odnośnika 
• label – atrybut definiuje etykietę grupy 
• lang – atrybut definiuje język dla całej lub fragmentu strony 
• language – atrybut definiuje język skryptu 
• 
link – atrybut definiuje kolor odnośników 
• longdesc – atrybut definiuje adres dokumentu opisującego element 
• marginheight – atrybut definiuje szerokość marginesu pionowego ramki 
• marginwidth – atrybut definiuje szerokość marginesu poziomego ramki 
• maxlength – atrybut definiuje maksymalną długość tekstu w polu 
• media – atrybut definiuje typ nośnika 
• method – atrybut definiuje sposób przekazywania parametrów 
• multiple – atrybut definiuje wybór wielu elementów 
• name – atrybut definiuje nazwę elementu 
• nohref – atrybut definiuje obszar, z którym nie jest związany żaden odnośnik 
• noresize – atrybut definiuje stały rozmiar ramki 
• noshade – atrybut definiuje brak cienia pod linią HR 
• nowrap – atrybut definiuje blokowanie przełamywanie akapitów 
• 
object – atrybut definiuje nazwę pliku z serializowaną wersją appletu 
• onblur – atrybut definiuje reakcję na opuszczeniu aktywnego elementu 
• onclick – atrybut definiuje reakcję na kliknięcie myszy 
• ondblclick – atrybut definiuje reakcję na podwójne kliknięcie myszy 
• onfocus – atrybut definiuje reakcję na uaktywnienie elementu 
• onkeydown – atrybut definiuje reakcję na wciśnięcie klawisza 
• onkeypress – atrybut definiuje reakcję na wciśnięcie i puszczenie klawisza 
• onkeyup – atrybut definiuje reakcję na puszczenie klawisza 
• onload – atrybut definiuje reakcję na wczytanie strony WWW 
• onmousedown – atrybut definiuje reakcję na wciśnięcie przycisku myszy 
• onmousemove – atrybut definiuje reakcję na poruszenie myszą nad elementem
• onmouseout – atrybut definiuje reakcję na opuszczenie elementu 
• onmouseover – atrybut definiuje reakcję na najechanie nad element 
• onmouseup – atrybut definiuje reakcję na puszczenie przycisku myszy 
• onunload – atrybut definiuje reakcję na usunięcie strony WWW 
• profile – atrybut definiuje adresy profili dokumentów HTML 
• 
prompt – atrybut definiuje tekst opisujący pole formularza 
• readonly – atrybut definiuje element tylko do odczytu 
• rel – atrybut definiuje relacje między dokumentami 
• rev – atrybut definiuje odwrote relacje między dokumentami 
• rows – atrybut definiuje liczbę kolumn lub wysokość elementu 
• rowspan – atrybut definiuje ilość połączonych wierszy 
• rules – atrybut definiuje typ krawędzi tabeli 
• scheme – atrybut definiuje schemat profilu 
• scope – atrybut definiuje zasięg komórki nagłówka 
• scrolling – atrybut definiuje paski przewijania w ramce 
• selected – atrybut definiuje element rozwijanego pola wyboru jako wybrany 
• shape – atrybut definiuje kształt aktywnego regionu mapy odsyłaczy 
• size – atrybut definiuje wielkość elementu 
• span – atrybut definiuje ilość kolumn w grupie 
• src – atrybut definiuje adres zawartości elementu 
• standby – atrybut definiuje tekst pokazywany w czasie ładowania obiektu 
• start – atrybut definiuje numer początkowy listy 
• style – atrybut definiuje styl CSS elementu 
• summary – atrybut definiuje skrótowy opis tabeli 
• tabindex – atrybut definiuje kolejność tabulacji 
• target – atrybut definiuje okno docelowe dla otwieranego dokumentu 
• 
text – atrybut definiuje kolor tekstu 
• title – atrybut definiuje tytuł elementu 
• type – atrybut definiuje typ elementu 
• usemap – atrybut definiuje adres mapy dla elementu 
• valign – atrybut definiuje wyrównanie w pionie 
• value – atrybut definiuje wartość atrybutu 
• valuetype – atrybut definiuje typ wartości atrybutu 
• 
version – atrybut definiuje standard języka HTML użyty w dokumencie 
• 
vlink – atrybut definiuje kolor odwiedzonych odnośników 
• 
vspace – atrybut definiuje odstępy pionowe dookoła elementu 
• width – atrybut definiuje szerokość elementu

 

 

 

 

 

CSS hacks

This article is about web design. If you came here looking for Counter Strike Source information, try searching for Counter Strike Source hacks.

Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it’s best to know what your options are and weigh the consequences appropriately. The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.

Conditional comments

UpDue to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks. Luckily, as of version 5, it deliberately supports a rather safe-to-use hack called “conditional comments”. Conditional comments are specially constructed HTML comments that Internet Explorer on Windows may treat differently from other browsers, optionally based on IE’s version number. They can cause Internet Explorer to ignore the markup between comments or to include part of a comment as if it was regular markup. Conditional comments apply specifically to browsers using Internet Explorer’s Trident layout engine, meaning IE-based browsers like Maxthon and Avant handle them like Internet Explorer does while browsers using other layout engines see them simply as regular comments. Internet Explorer on the Mac uses a different layout engine and doesn’t support conditional comments.

The most beneficial aspect of conditional comments is that you are not relying on browser bugs when using them. When you use CSS hacks that rely on browser bugs, you run into the possibility of those bugs being fixed at an unwanted time or other browsers showing the same bugs. Conditional comments only work in browsers that specifically support them and claim to be based on Internet Explorer, which in this case all known browsers are honest about.

There are two forms of conditional comments: positive and negative. A positive conditional comment will expose the included markup only to web browsers that match the condition (meaning only the selected versions of Internet Explorer). A negative conditional comment will expose the markup only to web browsers that don’t match the condition (meaning all non-IE web browsers and any versions of IE that the condition didn’t match). Note that, since versions of IE older than IE 5 don’t support conditional comments, you may get unexpected results in those browsers.

Syntax

UpThe syntax for conditional comments is as follows:

Positive
<!--[if condition]> HTML <![endif]-->
Negative
<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

condition is one of the following:

IE
Any version of IE
lt IE version
Versions less than version
lte IE version
Versions less than or equal to version
IE version
Only version version
gte IE version
Versions greater than or equal to version
gt IE version
Versions greater than version

version is the version of Internet Explorer, typically 55.56, or 7

HTML is the HTML to be included if the condition does or doesn’t match, depending on the type of conditional comment. When included, the HTML is placed right where the conditional comment is in the source.

For negative conditions, <![IGNORE[--><![IGNORE[]]> can be replaced with --> if the condition is simply IE. The longer version is only needed when Internet Explorer might parse the contents.

The <![IGNORE[ ... ]]> directive is not available in XML, so it is illegal to use it in XHTML. A solution would be to split it up into two special conditional comments: <!--[if !condition]> XHTML <![endif]--> <!--[if !IE]>--> XHTML <!--<![endif]--> where XHTML is the same both places. Note that Internet Explorer 7 and below don’t yet recognize XHTML as a form of XML, so this is merely forward-looking.

To minimize the chance of your site breaking in future versions of Internet Explorer, read Preparing your site for IE.next.

Fixing stand-alone versions of Internet Explorer

UpInternet Explorer was not designed to allow multiple versions to be installed at once, and Microsoft doesn’t officially support any such configurations. If you use one of the hacked third party packages that attempts to do this, you will experience problems with version-specific conditional comments, among other things. This is because the different stand-alone copies still rely on a common centralized registry for certain data, including version information.

Although there is no simple way to cut through all of the issues with stand-alone versions of Internet Explorer, it is possible to force them to look elsewhere for their version information, thus fixing this issue with conditional comments. The trick is to remove the normal centralized version indicator. To do this, first open up regedit.exe from the “Run…” dialog. Navigate toHKEY_LOCAL_MACHINE/Software/Microsoft/Internet Explorer/Version Vector/ (If HKEY_LOCAL_MACHINE doesn’t exist, try HKLM instead). In the right pane, you should see a row with a Name value of IE. Rename this by clicking on it and changing it to zIE (or anything unique and different). Restart Internet Explorer to see the effects. Now when it looks for the IE key for its version information, the key will be missing and it will be forced to determine the correct version number from its own module.

Stand-alone versions of Internet Explorer have a number of other issues, and it therefore may be better to instead use a separate virtual machine for each version of Internet Explorer to ensure that what you see is what your users will see. I recommend VMware Server, which is completely free of charge and fairly easy to set up.

Conditional comments as a CSS hack

UpConditional comments can be used as a CSS hack by including links to stylesheets based on the layout engine. Here is an example of how stylesheets can be separated in this way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <link href="all_browsers.css" rel="stylesheet" type="text/css"> <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]--> <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]--> </head> <body> <p>Test</p> </body> </html>

In the above example, all_browsers.css applies to all browsers, ie_only.css only applies to all versions of Internet Explorer, ie_6_and_below.css applies to all versions of Internet Explorer below IE 7, recent.css applies to all browsers except IE versions below 7, and not_ie.css applies to all non-IE browsers.

See also: MSDN: About Conditional Comments

In-CSS hacks

UpOne of the drawbacks of conditional comments is that they require changes to the HTML source. Unfortunately, there is no equivalent to conditional comments in CSS. Instead, if you must use in-CSS hacks, you must use some other much less reliable techniques, often involving the exploitation of browser bugs.

Easy selectors

UpMost in-CSS hacks deal with selector bugs. The following is a list of browser version ranges and the beginnings of selectors that are known to select elements in them. Note that because these hacks rely on browser bugs or missing features, results may vary in some lesser-known or future browsers. All of these selectors use valid CSS.

IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}

Note that the hack for IE 7 and below is actually two separate selectors: one for IE 7 and one for IE 6 and below. The rest of the desired selector must be added to both parts of the hack. The two parts cannot be combined with a comma, because IE 6 and below will fail to correctly parse the selector and won’t be targetted.

Some of these selectors require that the document has a doctype but no processing instructions (including XML declarations). This is the ideal setup to prevent IE 6 from going into quirks mode anyway.

The above selectors will select either the html or body element. This should be used as the start of your full selector. For example, if your desired selector is #foo .bar and you want it to apply only to IE 7, your resulting selector will be *:first-child+html #foo .bar.

Warning: Due to the nature of the Opera-specific selector and Internet Explorer 7’s incorrect handling of :first-child, it is very possible that the html:first-child selector may also select in a future version of Internet Explorer, so be careful when using it. This selector also relies on a bug, so it may be fixed in a future version of Opera. This page also describes analternative method that is more of an issue to implement but may be somewhat more dependable considering the likely priorities of bug fixing.

Minimized attribute selectors

UpThese hacks are based on differences in handling of attributes in minimized form. If a tag is written <input disabled>input[disabled="disabled"] {} should select it. However, most browsers get this wrong and in different ways.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> </head> <body> <input type="hidden" disabled id="attrhack"> <p>Test</p> </body> </html>

For the above markup, here are the selectors various browsers recognize to select the p element:

#attrhack[disabled=""]+p {}
Firefox 1.5 and below, possibly future versions
Safari 2.0 and below, possibly future versions
Konqueror 3.5 and below, possibly future versions
#attrhack[disabled="true"]+p {}
Opera 9 and below, possibly future versions

Note that neither of these selects Internet Explorer 7. Although it supports attribute selectors and adjacent sibling combinators, it doesn’t seem to recognize a string value for attributes in minimized form.

Notice: Minimized attribute form is allowed in HTML but not in XHTML. This hack will not work in XHTML documents.

!important

UpInternet Explorer 6 and below had a problem with the !important identifier that caused it to be ignored if another declaration of the same property appeared later in the same style declaration block. This can be used to feed Internet Explorer 6 and below special property values that are ignored by other browsers. Internet Explorer 7 fixed this issue.

Here is an example of this technique in use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <style type="text/css"> p { background: green !important; /* Major browsers other than IE 6 and below respect the importance immediately */ background: red; /* IE 6 and below use this value instead, even though the above was marked as important */ } </style> </head> <body> <p>Test</p> </body> </html>

@import „non-ie.css” all;

UpInternet Explorer 7 and below don’t support media selectors on @import rules, instead ignoring the entire rule when they are present. Therefore, you can create an entire stylesheet for non-IE browsers and import it into your main stylesheet by adding @import "non-ie.css" all;.

Future versions of Internet Explorer may support the @import rule correctly.

@import "stylesheet.css" all; imports the stylesheet in all major browsers except IE 7 and below. It may or may not work in future versions of IE.

body[class|=”page-body”]

UpThe CSS 2.1 specification isn’t clear about whether or not a hyphen can be included in the value of a hyphen-separated attribute selector. Most browsers, including Firefox and Internet Explorer 7, Allow the body[class|="page-body"] selector to select an element whose start tag looks like this: <body>. However, Opera interprets the specification differently in this regard. It splits up the attribute value by hyphens and only checks the first piece against the attribute selector value. Obviously, if the attribute was split by hyphens, the first piece won’t have any hyphens in it, so Opera treats this selector as a non-match. Therefore, when the proper class is applied to the body element, this selector matches Internet Explorer 7 and most modern browsers except Opera. Opera may change their behavior to match other browsers in the future, but this technique is known to work for Opera 8 and 9.

Here is an example of this technique in use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <style type="text/css"> p { background: red; /* Applies to all major browsers */ } body[class|="page-body"] p { background: green; /* Applies to IE 7 and most modern browsers except Opera */ } </style> </head> <body> <p>Test</p> </body> </html>

body[class|="page-body"] {} selects the body element with the class page-body in IE 7 and all modern browsers except Opera 9 and below. It may or may not work in future versions.

Unrecommended hacks

UpIf you are going to use hacks, the above techniques are the recommended choices. However, it’s interesting to point out the following unrecommended hacks. Some of them rely on invalid CSS or are more clumsy than the above alternatives.

_property: value and -property: value

UpDue to a parsing error, Internet Explorer 6 and below wouldn’t fail on properties that were prefixed with non-alphanumeric characters. Prefixing a regular property name with _ or - will cause the property to be applied to Internet Explorer 6 and below but generally not in other browsers. Internet Explorer 7 had this bug fixed.

The CSS specification allows browsers to use an underscore (_) or hyphen (-) as a prefix for a vendor-specific property name with the guarantee that such properties will never be used in a future CSS standard. Because of this guarantee, these two prefix characters are ideal options for this hack.

Although the CSS specification defines this vendor-specific property syntax, the properties are inherently not part of any W3C-endorsed CSS profile and are therefore invalid when validated against one. For this reason, and because there is an often acceptable alternative, this hack is unrecommended.

_propertyvalue and -propertyvalue apply the property value in IE 6 and below. Warning: this uses invalid CSS.

*property: value

UpAlthough Internet Explorer 7 corrected its behavior when a property name is prefixed with an underscore or a hyphen, other non-alphanumeric character prefixes are treated as they were in IE6. Therefore, if you add a non-alphanumeric character such as an asterisk (*) immediately before a property name, the property will be applied in IE and not in other browsers. Unlike with the hyphen and underscore method, the CSS specification makes no reservations for the asterisk as a prefix, so use of this hack could result in unexpected behavior as the CSS specifications evolve.

*propertyvalue applies the property value in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS.

body:empty

UpThe :empty pseudo-classes is proposed for CSS 3 and should select an element that has no elements or text inside it. However, when used on the body element, Firefox 1.5 and 2.0 (and corresponding versions of other Gecko-based browsers) always select it even when the body has content (which it should always have).

Although this hack is expected to be valid in CSS 3, it has not yet reached W3C Recommendation status and is invalid CSS 2.x, so it currently isn’t recommended to use this hack. However, it is probably the best way to single out recent versions of Firefox.

body:empty {} selects the body element in Firefox 1.5 and 2.0 only. It may or may not work in future versions. Warning: this uses invalid CSS 2.x but valid CSS 3 according to recent drafts.

>body

UpIf a simple selector is missing on either side of the child combinator (>), Internet Explorer 7 incorrectly assumes that the missing simple selector is a universal selector. So >body is treated by IE7 like *>body, while other browsers ignore it because it’s a parsing error. Similarly, IE7 treats >> like *>*>*.

IE7 has the same quirk with other combinators. +p is treated like *+p and ~p is treated like *~p. (Note: The ~ combinator is an upcoming CSS 3 feature and is not valid CSS 2.1.)

>body {} selects the body element in IE 7 only. It may or may not work in future versions. Warning: this uses invalid CSS!

html*

UpInternet Explorer 7 fixed the quirk that allowed the universal selector (*) to select some nonexistent parent of the html element, but there’s another issue that they didn’t fix: When a universal selector is directly adjacent to another simple selector without a space between, Internet Explorer 7 assumes a space there. That means that html* is treated by IE7 likehtml *, while other browsers ignore it because it’s a parsing error. Similarly, IE7 treats ** like * *.

html* {} selects all descendants of the html element in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS!

!ie

UpInternet Explorer 7 fixed one of the issues with the !important identifier, but it still has problems when the identifier has an error in it. If an illegal identifier name is used in place ofimportant, Internet Explorer 7 and below will handle the property normally instead of failing. Therefore, in any style declaration block, you can include properties intended to only apply to Internet Explorer and add an !ie identifier. Almost any word can be used in place of ie.

The !ie identifier allows the property to be applied in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS!

!important!

UpAnother problem with the !important identifier that wasn’t fixed in IE 7 is the treatment of non-alphanumeric characters after the identifier. Normally, this should cause the property to fail, but Internet Explorer 7 and below ignore the additional punctuate and apply the property as if it just had the !important identifier.

The !important! identifier allows the property to be applied with importance in IE 7 and below and the property is not applied in other browsers. It may or may not work in future versions. Warning: this uses invalid CSS!

 

 

Źródło http://www.webdevout.net/css-hacks

Niestandardowe fonty na stronie

Jestem w pełni świadomy tego, że jest po części o tym w kursie
Jednak mam zamiar w tym tekście pokazać 2 główne rzeczy:

  • jak zrobić to uniwersalnie
  • jak zrobić to lepiej (związane z: patrz wyżej)

Uniwersalne czcionki dla sieci ograniczają i utrudniają życie
zarówno webdesignerom – jeżeli są świadomi tego, że są zmuszeni do korzystania z nich
jak i webmasterom – jeżeli jakiś webdesigner wymyślił sobie nietypową czcionkę (i co teraz zrobić?)

Dotychczasowe rozwiązania były jednak średnie – image-replacement jest mimo wszystko niewygodny (trzeba wcześniej przygotować pliki z obrazkami – o ile w przypadku stałych elementów jak menu nie stanowi to problemu, to ze zmiennym tekstem, jak np. nagłówki, tak różowo już nie jest), a inne metody wymagały JS lub Flasha (bądź obu jednocześnie)

Na szczęście świat idzie do przodu (chociaż ten akurat feature IE zaproponował dosyć wcześnie, chociaż z nim jest inny problem – o tym potem) i możliwości przeglądarek się rozwijają, trwają prace nad CSS3, te sprawy.

No i CSS3 przyszedł z ratunkiem – pozwala na użycie czcionki, którą przeglądarka musi ściągnąć.

Jak to zrobić? kawałek kodu potrzebny do tego jest prosty i krótki:

Kod:    Zaznacz
Podgląd (X)HTML

Uruchom   Zapisz

@font-face {
font-family: ‚Niestandardowy font’;
src: url(Niestandardowy_font.ttf) format(„truetype”)
}

a potem w kodzie wystarczy użyć czcionki o nazwie jaką zdefiniowaliśmy w font-family

A jak to zrobić lepiej? Nie zakładać, że użytkownik tej czcionki nie posiada i nie zmuszać go do jej ściągania. Czyli najpierw sprawdzić, czy nie ma tej czcionki:

Kod:    Zaznacz
Podgląd (X)HTML

Uruchom   Zapisz

@font-face {
font-family: ‚Niestandardowy font’;
src: local(‚Niestandardowy font’), url(Niestandardowy_font.ttf) format(„truetype”)
}

Polecam zapoznanie się ze specyfikacją ogólnie.

Dobra trójka się rozwija, więc w Firefoksie (od wersji bodajże 3.1), Operze (od 10) czy Safari (od 3?) normalnie radzą sobie z fontami w ttf (raczej najpopularniejszy format). Chrome bazuje na silniku Safari więc też to potrafi.
Tylko wszyscy wiemy, że nie do końca warto coś stosować, jeżeli Internet Explorer tego nie wspiera. A IE fontów ttf odczytywać nie potrafi. Wymaga formatu, który MS sam wymyślił czyli Embedded OpenType (eot).

Jeżeli mamy nasz font w .eot to nie ma problemu – dodajemy jedną linijkę i wszystko działa. Nawet w IE6!

Kod:    Zaznacz
Podgląd (X)HTML

Uruchom   Zapisz

@font-face {
font-family: ‚Niestandardowy font’;
src: url(Niestandardowy_font.eot);
src: local(‚Niestandardowy font’), url(Niestandardowy_font.ttf) format(„truetype”)
}

Jeżeli nie – to mamy pewien problem. Problem, który na szczęście da się w prosty sposób rozwiązać. Jakaś dobra dusza napisała program, który potrafi przekonwertować font z .ttf na .eot
http://code.google.com/p/ttf2eot/
Windowsowcy mają tam nawet gotową binarkę, reszta świata (Linux, Unix) potrafi raczej korzystać z make więc problemów być nie powinno.
Instrukcja użytkowania w README oczywiście.

Jak to wygląda w praktyce? Bardzo dobrze: http://roberto.ovh.org/html-css/fonty.html
Działa w Fx, Operze, Safari, Chrome i IE.
edit: nie działa pod Chrome na Windowsie (a na Linuksie? ktoś sprawdzi?)
Osobiście nie widzę zbytnio powodów, żeby z tego nie korzystać.
Oczywiście nie należy z tym też przesadzać.

I też bardzo ważna rzecz: nie można sobie użyć jakiegokolwiek fontu – one są udostępniane na konkretnych licencjach, więc trzeba sprawdzić, czy możemy je wykorzystać na stronie, zarówno prywatnej jak i komercyjnej.

Na deser – strona ze zbiorem darmowych (nawet do komercyjnego użycia) fontów:
http://www.fontsquirrel.com/
Wisienką na torcie jest fakt, że są tam gotowe pakiety czcionek z przeznaczeniem na strony internetowe, które mają w sobie gotowy kod CSS i font także w formacie .eot dla IE

——————————

nie wiem też jak nazwy z kropką są interpretowane, ale dałbym po prostu ‚Trajan Pro’

specjalnie zrobiłem taką prostą stronę na demo z czytelnym css’em

Kod: Rozwiń   Zaznacz
Podgląd (X)HTML

Uruchom   Zapisz

/*
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * @vendor:     Dieter Steffmann
 * @vendorurl:  http://www.steffmann.de
 * @licenseurl: http://www.fontsquirrel.com/license/Marketing-Script
 *
 *
 */
@font-face {
font-family: ‚
Marketing Script;
src: url(MarketingScript.eot);
src: local(‚Marketing Script’), url(MarketingScript.ttf) format(„truetype”)
}


* {
    margin: 0;
    padding: 0
}

body {
    font: 35px/50px ‚Marketing Script‚;
    text-align: center;
    padding: 5em 1em
}

h1 {
    font-size: 40px;
    font-weight: 400
}

po to importujesz tego fonta, żeby go potem normalnie używać.

——————————–

http://roberto.ovh.org/html-css/fonty.html )
Source: http://www.forumweb.pl/viewtopic.php?t=55902