Uprava one page (flat) templatu

Programovacie jazyky, rady, poradňa...
heker
Redeemer
Redeemer
Používateľov profilový obrázok
Príspevky: 14816
Registrovaný: 30 máj 2006, 20:27

Uprava one page (flat) templatu

Príspevok od používateľa heker »

Potrebujem spravit jeden info web. Nasiel som si html template, ktory mi sedi a paci sa mi. Problem je, ze template ma v css definovanu triedu pismna, teda je k tomu pridane aj pismo, ale toto pismo nema nasu diakritiku. Tak som skusil dalsi template a to iste. Uvazoval som nad zmenou pisma, ze by som to zamenil za Arial, Calibri alebo nieco co ma podporu slovenskej diakritiky. Avsak v CSS je toho strasne vela a ja s CSS nie som kamarat. Su tam pouzite fonty Open Sans Font a este Libre Baskerville Font.

Takto vyzera CSS urcene k fontom
Spoiler
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */

/*
* Open Sans
================================================================================ */
@font-face {
font-family: 'opensans-regular';
src: url('fonts/opensans/OpenSans-Regular-webfont.eot');
src: url('fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opensans-italic';
src: url('fonts/opensans/OpenSans-Italic-webfont.eot');
src: url('fonts/opensans/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-Italic-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-Italic-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opensans-light';
src: url('fonts/opensans/OpenSans-Light-webfont.eot');
src: url('fonts/opensans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opensans-light-italic';
src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot');
src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-LightItalic-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-LightItalic-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opensans-semibold';
src: url('fonts/opensans/OpenSans-Semibold-webfont.eot');
src: url('fonts/opensans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-Semibold-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opensans-semibold-italic';
src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot');
src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opensans-bold';
src: url('fonts/opensans/OpenSans-Bold-webfont.eot');
src: url('fonts/opensans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-Bold-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-Bold-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opensans-bold-italic';
src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot');
src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opensans-extrabold';
src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot');
src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-ExtraBold-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opensans-extrabold-italic';
src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot');
src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg');
font-weight: normal;
font-style: normal;
}

/*
* Libre Baskerville
================================================================================ */
@font-face {
font-family: 'librebaskerville-bold';
src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot');
src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/librebaskerville/librebaskerville-bold-webfont.woff') format('woff'),
url('fonts/librebaskerville/librebaskerville-bold-webfont.ttf') format('truetype'),
url('fonts/librebaskerville/librebaskerville-bold-webfont.svg#libre_baskervillebold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'librebaskerville-italic';
src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot');
src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/librebaskerville/librebaskerville-italic-webfont.woff') format('woff'),
url('fonts/librebaskerville/librebaskerville-italic-webfont.ttf') format('truetype'),
url('fonts/librebaskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'librebaskerville-regular';
src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot');
src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/librebaskerville/librebaskerville-regular-webfont.woff') format('woff'),
url('fonts/librebaskerville/librebaskerville-regular-webfont.ttf') format('truetype'),
url('fonts/librebaskerville/librebaskerville-regular-webfont.svg#libre_baskervilleregular') format('svg');
font-weight: normal;
font-style: normal;
}


/*
* FIXED for Font-Face Chrome Rendering
================================================================================ */
@media screen and (-webkit-min-device-pixel-ratio:0) {

@font-face {
font-family: 'opensans-semibold';
src: url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
}

@font-face {
font-family: 'opensans-bold';
src: url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
}

}
Zda sa mi to prilis komplikovane, okrem toho su tam subory s fontami dalsie tri CSS subory ohladom fontov pisma. Ma vyznam to prerabat, aby sa zmenil font pisma alebo ako to vyriesit lahko a elegantne, aby som tam dostal diakritiku?
Michaelo
Hardcore addict
Hardcore addict
Používateľov profilový obrázok
Príspevky: 6177
Registrovaný: 16 júl 2008, 20:29
Bydlisko: Pri PC
Kontaktovať používateľa:

Re: Uprava one page (flat) templatu

Príspevok od používateľa Michaelo »

Sithanut si SUblime text, otvorit si CSSka kde su tie fonty pouzite, stlacit CTRL+F, napisat meno fontu a potom ALT+A, takto mozes prepisat uplne vsetky vyskyty tych fontov v celom subore.

Potom by si kludne mohol to CSS urcene k fontom aj samotne fonty odstranit.
heker
Redeemer
Redeemer
Používateľov profilový obrázok
Príspevky: 14816
Registrovaný: 30 máj 2006, 20:27

Re: Uprava one page (flat) templatu

Príspevok od používateľa heker »

To som spravil cez PSpad a nemalo to efekt ako som ocakaval. Ide to tento template - http://www.styleshout.com/free-templates/ceevee/

//autoeditácia príspevku (14 Nov 2015, 0:49)
Pozeram na Google Fonts tie dva fonty pisma. U oboch ked som napisal diakritiku a dlhsie text, napriklad teraz som prekopiroval text zo sme.sk, tak nebol problem s diakritikou. Subory su v UTF-8, aj na zaciatku HTML suboru je charset UTF-8, ale toto mi pripada ako cisty problem s fontom pisma, ako keby nemal pismena s diakritikou, pretoze ak mam slovo "mačacina", tak č mi hodi uplne inym fontom pisma pre chybajucu diakritiku.

Edit - Tak sa zda, ze som to spravil. Z Google Fonts som si stiahol tie fonty, cez generator na stranke http://www.fontsquirrel.com/tools/webfont-generator som vygeneroval tie fonty nanovo (treba pouzit expert nastavenie, upravit kodovanie na slovak+czech), potom som tie subory ulozil, opravil vygenerovane nazvy podla tried v povodnom CSS subore a tiez upravil cesty. Hadam to niekomu pomoze. Nie je to zlozite, len treba na to prist a davat si pozor na preklepy pri nahradzovani tried, fontov a nazvov suborov.
Michaelo
Hardcore addict
Hardcore addict
Používateľov profilový obrázok
Príspevky: 6177
Registrovaný: 16 júl 2008, 20:29
Bydlisko: Pri PC
Kontaktovať používateľa:

Re: Uprava one page (flat) templatu

Príspevok od používateľa Michaelo »

Alebo aj tak sa da. Slo o to ci si chcel pouzivat tie fonty dalej alebo nejake ine.
Napísať odpoveď